Уменьшение изображения и сохранение соотношения сторон

Question

Код, который я использую ниже, разрушает соотношение сторон. Что я могу сделать так, чтобы независимо от размеров, соотношение сторон всегда поддерживалось?

<img height="25%" width="25%" src="{{ response.getPhoto() }}" /> 

Answer 1

Сначала удалите встроенный height="25%" width="25%" из <img> тега, или вы должны только установить либоwidth или height, но не обоих. Если установлено одно из значений, другое автоматически становится auto, которое будет поддерживать размеры.

Однако, рекомендуется использовать CSS min-width, min-height, max-width или max-height собственность, чтобы сделать это, просто демо следует, или использовать фоновое изображение с background-size собственности.

div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 150px; 
 
    width: 150px; 
 
    border: 1px solid red; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
}

<div><img src="//dummyimage.com/500x1000"/></div> 
 
<div><img src="//dummyimage.com/1000x500"/></div> 
 
<div><img src="//dummyimage.com/500x500" /></div>

Answer 2

Взятые прямо из Bootstrap. Полностью реагирующие изображения, которые всегда поддерживают соотношение сторон.

CSS

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

HTML

<div style="width:100px;"> 
    <img class="img-responsive" src="https://placehold.it/350x150"/> 
</div> 

Пример скрипку: http://jsfiddle.net/wa5e6raa/

Answer 3

Here работает пример (сжатие изображения - но сохраняя пропорции):

.wrapper { 
 
    width: 100%; 
 
} 
 
.wrapper img { 
 
    width: 100%; 
 
}

<div class="wrapper"> 
 
    <img src="http://placehold.it/600x150" /> 
 
</div>