图像自动高度缩放宽度

Question

我有一些宽度较小的图像，我伸展宽度以适应容器，但是也希望高度也可以放大，感谢提前，Phil

Answer 1

在你的css中：

img {
    width: 100%;
    height: auto !important;
}

CSS可以自然地处理这个问题。图像将自动占据其容器宽度的100％，高度将缩放以匹配。

Answer 2

无需指定高度。

看看我的例子，这是我的jsfiddle

http://jsfiddle.net/d575tr49/

这是HTML

<div class="ele">
    <img src="http://viralstash.net/wp-content/uploads/2014/03/521013543_1385596410.jpg" border="0" />
</div>

这是CSS

.ele {
    outline: red solid 1px;
    width: 250px;
}
.ele img {
    width: 100%;
    display: block;
}

如果您控制Parent元素的宽度，只需使用with，则无需担心图像的宽度和高度值。

它自己的图像将使用父项大小设置其宽度，默认情况下，高度值将与宽度成比例，因此根本不需要指定高度值，即使在父项中也是如此。