100% width image, keep ratio with min-height

Question

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?

Answer 1

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.