Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

image

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?

like image 563
user1447941 Avatar asked Sep 07 '12 15:09

user1447941


People also ask

How do I resize an image without changing the aspect ratio?

Press-and-hold the Shift key, grab a corner point, and drag inward to resize the selection area. Because you're holding the Shift key as you scale, the aspect ratio (the same ratio as your original photo) remains exactly the same.

How do you preserve an image ratio in CSS?

In the CSS for the <div>, add a percentage value for padding-bottom and set the position to relative, this will maintain the aspect ratio of the container. The value of the padding determines the aspect ratio. ie 56.25% = 16:9.

How do you change the size of an image without distorting it in CSS?

There are a few ways to make an image smaller without distortion in CSS. One way is to use the CSS property 'width'. You can set the width to a percentage or a pixel value. Another way is to use the CSS property 'max-width'.


1 Answers

Just set the width to auto:

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

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

like image 163
Joseph Silber Avatar answered Oct 09 '22 04:10

Joseph Silber