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

Posted 2023-03-07

【中文标题】具有动态大小的图像网格固定纵横比

【英文标题】：Image grid fixed aspect ratio with dynamic size

【发布时间】：2021-05-10 04:05:06

【问题描述】：

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

【参考方案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>

【参考方案2】：

您可以在图像周围使用额外的容器divs 来实现此目的，底部填充为 100%。

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

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

然后在您的图片周围添加divs：

<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>