Tailwind CSS Academy · 강의

종횡비

이미지와 삽입 콘텐츠에 aspect-square, aspect-video, 사용자 지정 aspect-[w/h] 값을 사용해 일정한 비율을 유지합니다.

레슨 4/413개 단계

종횡비은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

The Aspect Ratio Problem

Before CSS had a native aspect-ratio property, maintaining proportional element sizes required the infamous padding-top hack: setting a percentage padding on a zero-height container. Tailwind's aspect-* utilities use the modern aspect-ratio CSS property instead, which is clean, readable, and supported in all modern browsers. The result is an element that always maintains its proportions regardless of width.

<!-- Without aspect ratio: fixed height -->
<div class="w-full h-48 bg-gray-200">Fixed height, distorts on resize</div>

<!-- With aspect ratio: proportional height -->
<div class="w-full aspect-video bg-gray-200">
  Always 16:9, height follows width
</div>

aspect-square

aspect-square forces an element to always be a perfect square — its height equals its width at all times. This is ideal for avatar images, product thumbnails, icon containers, and any element that must be square regardless of where it appears. Without an explicit width, the element fills its parent; set w-* to control the size while aspect-square handles the height automatically.

<!-- Square avatar, square card thumbnail, square icon -->
<div class="flex gap-4 items-start">
  <!-- Square avatar -->
  <div class="w-16 aspect-square bg-indigo-400 rounded-full flex items-center justify-center text-white font-bold">
    AB
  </div>

  <!-- Square thumbnail -->
  <div class="w-32 aspect-square bg-gradient-to-br from-pink-400 to-rose-600 rounded-lg"></div>

  <!-- Square icon box -->
  <div class="w-12 aspect-square bg-emerald-500 rounded-xl flex items-center justify-center text-white text-xl">
    ★
  </div>
</div>

aspect-video for Media

aspect-video applies a 16:9 ratio — the standard widescreen format used by YouTube, Vimeo, and most video content. Apply it to video embeds, iframe wrappers, and video thumbnails to ensure they resize correctly. This is particularly important for responsive iframes, which do not resize naturally and historically required complex wrapper techniques to stay in ratio.

<!-- Responsive YouTube embed wrapper -->
<div class="w-full max-w-2xl mx-auto">
  <div class="aspect-video w-full">
    <iframe
      class="w-full h-full rounded-lg"
      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
      allowfullscreen
    ></iframe>
  </div>
</div>

Custom Aspect Ratios

For ratios not covered by the built-in presets, use Tailwind's arbitrary value syntax: aspect-[4/3] for the classic photography ratio, aspect-[3/2] for landscape photography, or aspect-[9/16] for portrait/mobile video. The numerator is width and denominator is height. The JIT engine compiles exactly the ratio you specify with no extra CSS needed.

<!-- Various custom aspect ratios -->
<div class="flex gap-4 flex-wrap">
  <!-- 4:3 classic photo ratio -->
  <div class="w-40 aspect-[4/3] bg-blue-200 rounded flex items-center justify-center text-sm">
    4:3
  </div>

  <!-- 3:2 landscape photo -->
  <div class="w-40 aspect-[3/2] bg-green-200 rounded flex items-center justify-center text-sm">
    3:2
  </div>

  <!-- 9:16 portrait/story -->
  <div class="w-24 aspect-[9/16] bg-rose-200 rounded flex items-center justify-center text-sm">
    9:16
  </div>
</div>

Aspect Ratio With Images

When using aspect ratio containers for images, set the image to w-full h-full object-cover so it fills the ratio container without stretching or leaving gaps. The object-cover utility scales the image to cover the container completely, cropping the edges if necessary — exactly like background-size: cover but for inline images.

<!-- Image card with consistent 16:9 thumbnail -->
<div class="max-w-xs rounded-xl overflow-hidden shadow">
  <!-- Ratio container controls the aspect ratio -->
  <div class="aspect-video">
    <img
      src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=400"
      alt="Developer workspace"
      class="w-full h-full object-cover"
    />
  </div>
  <div class="p-4 bg-white">
    <h3 class="font-bold">Blog Post Title</h3>
    <p class="text-sm text-gray-500 mt-1">Image always maintains 16:9 ratio.</p>
  </div>
</div>

Combining Aspect Ratio With Grid

Aspect ratios shine in grid layouts where consistent proportions across all cells matter. Set the ratio on the container, not the child, and use object-cover on images inside. Each grid cell then has the same proportions regardless of content, creating the uniform tile pattern seen in photo galleries, app icon grids, and streaming media catalogs.

<!-- Photo gallery with uniform square tiles -->
<div class="grid grid-cols-3 gap-2">
  <div class="aspect-square overflow-hidden rounded">
    <div class="w-full h-full bg-gradient-to-br from-blue-400 to-indigo-600"></div>
  </div>
  <div class="aspect-square overflow-hidden rounded">
    <div class="w-full h-full bg-gradient-to-br from-rose-400 to-pink-600"></div>
  </div>
  <div class="aspect-square overflow-hidden rounded">
    <div class="w-full h-full bg-gradient-to-br from-emerald-400 to-teal-600"></div>
  </div>
  <div class="aspect-square overflow-hidden rounded">
    <div class="w-full h-full bg-gradient-to-br from-amber-400 to-orange-600"></div>
  </div>
  <div class="aspect-square overflow-hidden rounded">
    <div class="w-full h-full bg-gradient-to-br from-purple-400 to-violet-600"></div>
  </div>
  <div class="aspect-square overflow-hidden rounded">
    <div class="w-full h-full bg-gradient-to-br from-sky-400 to-cyan-600"></div>
  </div>
</div>

Aspect Ratio for Map Embeds

Map embeds from Google Maps, Mapbox, or OpenStreetMap are iframes that behave like video iframes. Wrapping them in an aspect-video or aspect-[4/3] container ensures the map scales responsively. The iframe itself gets class="w-full h-full" to fill the ratio container, giving a map that adapts to any layout without a fixed pixel height.

<!-- Responsive map embed -->
<div class="rounded-xl overflow-hidden shadow-lg">
  <div class="aspect-[4/3] w-full">
    <iframe
      class="w-full h-full"
      src="https://www.google.com/maps/embed?pb=!1m18!..."
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
    ></iframe>
  </div>
</div>

Aspect Ratio and object-fit Variants

While object-cover is most common, Tailwind offers other object-fit utilities to go with aspect ratio containers. object-contain scales the image to fit within the bounds while preserving the full image without cropping. object-fill stretches to cover (distorts). object-none shows the image at its natural size. The object-position-* utilities control which part of the image is visible when cropping with cover.

<!-- Comparing object-cover vs object-contain -->
<div class="flex gap-4">
  <div>
    <p class="text-sm text-center mb-1">object-cover (crops)</p>
    <div class="aspect-square w-32 overflow-hidden rounded">
      <img src="https://picsum.photos/200/300" class="w-full h-full object-cover" alt="Cover" />
    </div>
  </div>
  <div>
    <p class="text-sm text-center mb-1">object-contain (fits)</p>
    <div class="aspect-square w-32 overflow-hidden rounded bg-gray-100">
      <img src="https://picsum.photos/200/300" class="w-full h-full object-contain" alt="Contain" />
    </div>
  </div>
</div>

Aspect Ratio for Loading Skeletons

Aspect ratio containers solve a common UX problem: layout shift while images load. By wrapping images in a ratio container with a background color, the space is reserved before the image loads. Adding animate-pulse on the container creates a skeleton loading effect that maintains the exact proportions of the final image, preventing jarring jumps when content arrives.

<!-- Skeleton loaders with correct aspect ratios -->
<div class="grid grid-cols-2 gap-4 max-w-sm">
  <div class="aspect-square bg-gray-200 animate-pulse rounded-lg"></div>
  <div class="aspect-square bg-gray-200 animate-pulse rounded-lg"></div>
  <div class="aspect-video col-span-2 bg-gray-200 animate-pulse rounded-lg"></div>
</div>

Removing Aspect Ratio

To remove an aspect ratio set at a lower breakpoint, use aspect-auto. This resets the aspect-ratio property to auto, letting the element size naturally based on its content. The pattern aspect-video md:aspect-auto uses a video ratio on mobile (useful for full-width banners) but releases the constraint on desktop where there is more space to work with.

<!-- Video ratio on mobile, auto on desktop -->
<div class="aspect-video md:aspect-auto md:h-96 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center text-white">
  <div class="text-center">
    <h2 class="text-2xl font-bold">Hero Section</h2>
    <p class="opacity-80 mt-2">16:9 on mobile, fixed 384px on desktop</p>
  </div>
</div>

Real Card Gallery With Aspect Ratio

Here is a complete product card gallery using aspect ratio for consistent thumbnails. The outer grid provides three columns, each card has a aspect-video image area, and the card body below it has flexible content. This is the exact pattern used by e-commerce sites, portfolio grids, and content management dashboards.

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Product Card -->
  <div class="bg-white rounded-xl shadow overflow-hidden">
    <div class="aspect-video bg-gradient-to-br from-sky-400 to-blue-600"></div>
    <div class="p-4">
      <h3 class="font-bold text-gray-900">Product Name</h3>
      <p class="text-sm text-gray-500 mt-1">Brief description of the item.</p>
      <div class="flex items-center justify-between mt-3">
        <span class="font-bold text-blue-600">$29.99</span>
        <button class="text-sm bg-blue-500 text-white px-3 py-1 rounded">Add to cart</button>
      </div>
    </div>
  </div>
</div>

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

인터랙티브 레슨에서 답해보세요

Lesson Recap

In this lesson you learned: aspect-square forces equal width and height for perfect squares, aspect-video applies the 16:9 ratio ideal for responsive iframes and thumbnails, and aspect-[w/h] accepts any custom ratio using arbitrary value syntax. Next up we explore border width, color, and styling utilities.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 30
레슨: 120

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“종횡비” 강의는 무료인가요?

네 — “종횡비” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“종횡비”에서 뭘 배우나요?

이미지와 삽입 콘텐츠에 aspect-square, aspect-video, 사용자 지정 aspect-[w/h] 값을 사용해 일정한 비율을 유지합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“종횡비” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Tailwind CSS Academy(으)로 돌아가기