宽高比
使用 aspect-square、aspect-video 和自定义的 aspect-[w/h] 值，为图像和嵌入内容保持一致的比例。
宽高比 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 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 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「宽高比」这节课中我会学到什么？
使用 aspect-square、aspect-video 和自定义的 aspect-[w/h] 值，为图像和嵌入内容保持一致的比例。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「宽高比」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。