Image grid fixed aspect ratio with dynamic size

user_6058120 0
Viewed 1966

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

If I have a grid-like this, how can I force the images to have a 1:1 aspect ratio? Yes, I can use object-cover, but then I would need to set a fixed width/height. Is there a way to do this while still keeping the dynamic width?

tailwind-css css html
2 Answers

You will need at least an extra container and apply the padding trick.

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

You can also consider the following plugin: https://github.com/tailwindlabs/tailwindcss-aspect-ratio to avoid writing any extra CSS and have a code like below

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

You could achieve this with extra container divs around your image with bottom padding 100%.

You first need to extend spacing in your tailwind.config.js to include the percentage you want.

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

Then add the divs around your images:

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