アスペクト比
画像や埋め込みコンテンツの比率を、aspect-square、aspect-video、カスタムのaspect-[w/h]値で一定に保ちます。
「アスペクト比」はCoddyKit上の無料Tailwind CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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.
よくある質問
「アスペクト比」レッスンは無料ですか？
はい。「アスペクト比」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。
「アスペクト比」で何を学びますか？
画像や埋め込みコンテンツの比率を、aspect-square、aspect-video、カスタムのaspect-[w/h]値で一定に保ちます。 ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Tailwind CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「アスペクト比」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTailwind CSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。