缩小图像并保持宽高比

Question

我在下面使用的代码破坏了宽高比。我可以做什么，无论尺寸如何，高宽比总是保持不变？

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

Answer 1

首先，从<img>标签删除内联height="25%" width="25%"，或者你应该只设置要么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>