CODEWITHSUNDEEP
htmlcsstailwind-css
Jaquarh
Jaquarh

Reputation: 6673

How can I set the height proportionate to the window size in TailWind?

I am trying to create a banner using an image. The issue I have is that when I use the inbuilt h-* utility in Tailwind, it renders extremely small.

<div class="hidden sm:block">
    <img
        class="w-full h-20 object-cover object-center"
        src="https://scontent-lhr8-1.cdninstagram.com/v/t51.2885-15/e35/s1080x1080/123373127_3521914557896505_7295974815335315741_n.jpg?_nc_ht=scontent-lhr8-1.cdninstagram.com&_nc_cat=109&_nc_ohc=DK6qb5zEM4MAX_DFVAe&_nc_tp=15&oh=271f24ef76f786772b436b59b9bd4e6b&oe=5FCC2E33"
    />
</div>

Below is the output that is given from this code.

Distorted Image

Any help on how I can reduce the size, without it distorting to a suitable banner size (roughly 200px) would be appreciated.

Upvotes: 0

Views: 585

Answers (1)

Georgy Malanichev
Georgy Malanichev

Reputation: 336

What's the target size for your banner? By using the h-20 class you've made it 80px high. If you want it to be full-width and around 200px high, you can try h-48 (translates to 12rem) instead, see https://play.tailwindcss.com/FD72cGTIgx

Upvotes: 1

Related Questions