Изменить размер изображения, но сохранить его соотношение?

Question

Прежде всего, я вижу, что другие сделали похожие посты, и я буду читать их полностью, но я просто хотел поставить свежий, так как вы никогда не знаете, есть ли у кого-то лучшее.

Объясните свою ситуацию:

Я хочу сделать галерею изображений, где вы щелкнули эскизы и нажмите большую версию изображения появляется в DIV их прямое право. Я понимаю, как это сделать, но я уже вижу проблему, которая произойдёт позже.

Все мои изображения различных размеров, поэтому я могу видеть, что соотношение правильного положения очень сложно.

Допустим, у меня есть div размером 500 пикселей и высотой 400 пикселей. Что я могу сделать, чтобы поместить любое изображение внутри этого размера, пропорциональное уменьшению масштаба.

Только для информации мои изображения будут намного больше, чем div для начала.

Answer 1

Вы могли бы просто сделать это:

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

или использовать одно из решений, предусмотренных здесь: automatically change the image size in the original ratio of the while change the size of that images parent element

Answer 2

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

CSS

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