Carousel height ?

[robsontenorio]

I took this example from docs and added h-40 to main div and object-cover to images.

TAILWIND PLAY: https://play.tailwindcss.com/a9swhsz5q0

---

"daisyui": "^5.5.18",
"tailwindcss": "^4.1.18",

---

It works fine on SAFARI.

But not on CHROME

But not on FIREFOX

<div class="carousel rounded-box h-40">
        <div class="carousel-item">
            <img
                class="object-cover"
                src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
                alt="Burger" />
        </div>
        <div class="carousel-item">
            <img
                class="object-cover"
                src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
                alt="Burger" />
        </div>
        <div class="carousel-item">
            <img
                class="object-cover"
                src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
                alt="Burger" />
        </div>
        <div class="carousel-item">
            <img
                class="object-cover"
                src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"
                alt="Burger" />
        </div>
        <div class="carousel-item">
            <img
                class="object-cover"
                src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp"
                alt="Burger" />
        </div>
        <div class="carousel-item">
            <img
                class="object-cover"
                src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"
                alt="Burger" />
        </div>
        <div class="carousel-item">
            <img
                class="object-cover"
                src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
                alt="Burger" />
        </div>
    </div>

[pdanpdan]

This is normal, your images are presented with the info that they need to fit inside a box with a certain height, and they do this in the most normal way (except safari, of course) by keeping aspect ratio. object cover is only enforced when the image cannot resize itself.

You need to specify a width for the images.

About firefox, I suppose they were in-between waters if to work as expected or as safari, so they choose the worst approach - image is shown correctly but they add some space. Anyway if you set a width it works as expected.

https://play.tailwindcss.com/m4qSoROAbf

[robsontenorio]

Thanks @pdanpdan !

Yes, it works!. But, is there any alternative way besides enforcing a fixed width for images?

[pdanpdan]

Set an aspect ratio.

Do you have a rule for what width the images should have?

You want a fixed height, but do you want a number of images visible, or to have fixed width, or to have a certain aspect ratio...

[robsontenorio]

Hum, got it. Thanks!