我在下面使用的代码破坏了纵横比。我该怎么做才能始终保持纵横比不变?
<img height="25%" width="25%" src="{{ response.getPhoto() }}" />
最佳答案
取自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>
fiddle 示例:http://jsfiddle.net/wa5e6raa/
关于html - 缩小图像并保持纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31196919/