html - How do I resize an image while keeping the aspect ratio in CSS?

Question

I have a large image. I want to display it on its on own a web page, and when doing this without any CSS it fills the whole page and is too big to display at once (scroll bars appear). I want to scale it down so it fits the height of the user's screen (not the width). I've found solutions but these stretch the image to fit the whole of the screen -- I don't want this as it ruins the aspect ratio.

Basically, I want to resize an image while keeping the aspect ratio. How do I do this?

question from:https://stackoverflow.com/questions/12320761/how-do-i-resize-an-image-while-keeping-the-aspect-ratio-in-css

Answer 1

Just set the width to auto:

img {
   width: auto;
   max-height: 100%;
}

Here's the fiddle: http://jsfiddle.net/6Y5Zp/