固定纵横比的图片网格，大小动态调整

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，但那样我需要设置固定的宽度/高度。是否有一种方法可以在保持动态宽度的同时做到这一点？

- hoan

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>

- Temani Afif

Answer 2

您可以通过为图像添加额外的容器div并设置100%的底部填充来实现这一点。

首先需要在tailwind.config.js中扩展spacing，以包含您想要的百分比。

module.exports = {
    theme: {
        extend: {
            spacing: {
                '1/1': '100%',
            }
        }
    },
    variants: {},
    plugins: [],
}

然后在您的图像周围添加 div：

<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 pb-1/1">
            <img class="absolute w-full h-full object-cover" src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" />
        </div>
        <div class="relative pb-1/1">
            <img class="absolute w-full h-full object-cover" src="https://m.media-amazon.com/images/I/41bffUhJ4xL._SL500_.jpg" />
        </div>
        <div class="relative pb-1/1">
            <img class="absolute w-full h-full object-cover" src="https://images.unsplash.com/photo-1612476464716-431a2751e006" />
        </div>
    </div>
</div>

- juliomalves