CSS - 如何使图像容器宽度固定，高度自动拉伸

Question

我有一些像这样的 HTML 代码：

 <div class="item">
    <img src="...">
 </div>

并且 CSS 代码如下：

img {
    max-width: 100%;
    height: auto;
}

.item {
    width: 120px;
    height: 120px;
    height: auto;
    float: left;
    margin: 3px;
    padding: 3px;
}

我想做的是让图片根据div的宽度显示并拉伸高度。同时我也希望使div自适应图片大小。这是否可能？

- user2142709

Answer 1

您要查找的是 min-height 和 max-height。

img {
    max-width: 100%;
    height: auto;
}

.item {
    width: 120px;
    min-height: 120px;
    max-height: auto;
    float: left;
    margin: 3px;
    padding: 3px;
}

- Ryan

Answer 2

不，你不能让图片拉伸以适应div并同时实现相反的效果。这将导致无限调整大小循环。但是，你可以借鉴其他答案并实现一些最小和最大尺寸，但这不是问题的关键。你需要决定你的图像是否要按比例缩放以适应其父元素，或者你是否希望div扩展以适应其子img。使用这个代码块告诉我你希望图像大小是可变的，因此父div是图像缩放到的宽度。height: auto将保持图像的纵横比。如果你想拉伸高度，它需要是100%，就像这个fiddle。

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

http://jsfiddle.net/D8uUd/1/

- Dylan Valade

Answer 3

尝试使用width:inherit来使图像占据其容器<div>的宽度。它会拉伸/缩小高度以保持比例。不要在<div>中设置高度，它会根据图像高度自适应大小。

img {
    width:inherit;
}

.item {
    border:1px solid pink;
    width: 120px;
    float: left;
    margin: 3px;
    padding: 3px;
}

JSFiddle 示例

- jim31415