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属性来执行此操作，简单演示如下，或使用{{1的背景图像属性。

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;
}

Answer 2

从Bootstrap开始。完全响应的图像始终保持纵横比。

CSS

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

HTML

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

示例小提琴：http://jsfiddle.net/wa5e6raa/

Answer 3

Here正在运行示例（缩小图像 - 但保留纵横比）：

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

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

缩小图像并保持纵横比

3 个答案: