具有动态大小的图像网格固定纵横比

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，但是我需要设置一个固定的 width/height。有没有办法在保持动态宽度的同时做到这一点？

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>

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>

具有动态大小的图像网格固定纵横比

Image grid fixed aspect ratio with dynamic size

html

css

tailwind-css