图像自动高度缩放宽度

时间:2014-09-04 21:10:46

标签: html css

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

2 个答案:

答案 0 :(得分:2)

在你的css中:

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

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

答案 1 :(得分:1)

无需指定高度。

看看我的例子,这是我的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,则无需担心图像的宽度和高度值。

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