Resize images but keep its ratio?

Question

First off, I see others have made similar posts and I will be reading them fully but I just wanted to put a fresh one up as you never know if someone has something better.

Explain my situation:

I want to make an image gallery where you click thumbnails and on click a larger version of the image appears in a div to their direct right. I understand how to do this, but I can already see a problem that will occur later on.

All my images are different sizes so I can see keeping there ratio correct being very difficult.

Lets say I have a div that's 500px wide and 400px high. What could I do to put any image inside this of any size that would scale down proportionally.

Just for information my images will be a lot bigger than the div to start with.

possible duplicate of [How to resize images proportionally / keeping the aspect ratio?](http://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio) — Tushar, May 27 '15 at 10:30
if you really want to do this in the browser than CSS : img { max-width:500px; } — pszaba, May 27 '15 at 10:31
use max-width and max-height css property. and align vertical middle and horizontal center.. — G.L.P, May 27 '15 at 10:32

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

You could simply do this:

<div style="width: 500px; height: 400px">
   <img style="height: 100%; width: 100%">
</div>

or use one of the solutions provided here: automatically change the image size in the original ratio of the while change the size of that images parent element

edited May 23 '17 at 12:05

Community

1
1

answered May 27 '15 at 10:34

Friendly Crook

1,188
1
10
13

score 0 · Answer 2 · answered May 27 '15 at 10:42

0

<div style="width: 500px; height: 400px">
   <img src="as.jpg"/>
   <img src="as.jpg"/>
</div>

css

img{
max-height: 20%; 
max-width: 25%;
}

answered May 27 '15 at 10:42

Rasel

5,488
3
30
39

Resize images but keep its ratio?

2 Answers2