CODEWITHSUNDEEP
css
ThomasReggi
ThomasReggi

Reputation: 59365

100% width image, keep ratio with min-height

I want an image to be 100% BUT have a min-height of 500px when the image reaches this height I want the ratio to stay (basically) turn off 100% width. I know this is possible with javascript but I've never seen it done with css. Is it possible?

Upvotes: 6

Views: 16387

Answers (1)

Eugene Kaurov
Eugene Kaurov

Reputation: 2991

html 

<img src="/path.jpg" />

CSS

img { min-height: 500px; }

notice

Just ensure you had not defined width for this image in element or in css for upper elements. If everything is ok -- image would be scaled to min-height keeping ratio.

And keep in mind to use larger images then your min-height -- otherwise it would be ugly.

Upvotes: 5

Related Questions