100% width image, aspect ratio with minimum height

Question

I want the image to be 100%, but has a min-height value of 500 pixels when the image reaches that height. I want the ratio to remain (mostly) disabled at 100% width. I know this is possible with javascript, but I have never seen it with css. Is it possible?

Answer 1

html

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

CSS

 img { min-height: 500px; } 

notification

Just make sure you don't define a width for this image in the element or in css for the top elements. If everything is in order, the image will be scaled to the minimum value.

And remember, use larger images and then your minimum height - otherwise it would be ugly.