具有动态尺寸的图像网格固定纵横比

Question

<div class="p-4">
  <div class="grid gap-4 sm:gap-8 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
    <img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" />
    <img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" />
    <img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" />
    <img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" />
    <img src="https://images.unsplash.com/photo-1612476464716-431a2751e006" />
  </div>
</div>

如果我有这样的网格，如何强制图像具有 1:1 的宽高比？是的，我可以使用object-cover，但是我需要设置固定的宽度/高度。有没有办法在保持动态宽度的同时做到这一点？

Answer 1

您至少需要一个额外的容器并应用填充技巧。

.grid div {
  padding-top:100%;
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="p-4">
  <div class="grid gap-4 sm:gap-8 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
    <div class="relative"><img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" class="w-full h-full  absolute inset-0 object-cover"></div>
    <div class="relative"><img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" class="w-full h-full  absolute inset-0 object-cover"></div>
    <div class="relative "><img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" class="w-full h-full  absolute inset-0 object-cover"></div>
    <div class="relative"><img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" class="w-full h-full  absolute inset-0 object-cover"></div>
    <div class="relative"><img src="https://images.unsplash.com/photo-1612476464716-431a2751e006" class="w-full h-full  absolute inset-0 object-cover"></div>
  </div>
</div>

您还可以考虑以下插件： https: //github.com/tailwindlabs/tailwindcss-aspect-ratio以避免编写任何额外的 CSS 并使用如下代码

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="p-4">
  <div class="grid gap-4 sm:gap-8 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
    <div class="relative aspect-h-1 aspect-w-1"><img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" class="w-full h-full  absolute inset-0 object-cover"></div>
    <div class="relative aspect-h-1 aspect-w-1"><img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" class="w-full h-full  absolute inset-0 object-cover"></div>
    <div class="relative aspect-h-1 aspect-w-1"><img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" class="w-full h-full  absolute inset-0 object-cover"></div>
    <div class="relative aspect-h-1 aspect-w-1"><img src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" class="w-full h-full  absolute inset-0 object-cover"></div>
    <div class="relative aspect-h-1 aspect-w-1"><img src="https://images.unsplash.com/photo-1612476464716-431a2751e006" class="w-full h-full  absolute inset-0 object-cover"></div>
  </div>
</div>