22

我有一些像这样的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 的宽度来显示 img 并拉伸它的高度。我还希望 div 拉伸自身以适应 img。那可能吗？

4

3 回答 3

27

您正在寻找的是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;
}
于 2013-03-08T17:44:11.033 回答
1

不，您不能使 img 拉伸以适应 div 并同时实现反向。您将有一个无限的调整大小循环。但是，您可以从其他答案中记下一些笔记并实现一些最小和最大尺寸，但这不是问题所在。

您需要决定您的图像是否会缩放以适合其父级，或者您是否希望 div 扩展以适合其子级 img。

使用此块告诉我您希望图像大小可变，因此父 div 是图像缩放到的宽度。 height: auto将保持您的图像纵横比不变。如果你想拉伸高度，它需要100%像这个小提琴一样。

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

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

于 2013-03-08T19:10:45.373 回答
0

尝试width:inherit使图像采用其容器的宽度<div>。它会拉伸/收缩它的高度以保持比例。不要在 中设置高度<div>，它将调整大小以适合图像高度。

img {
    width:inherit;
}

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

JSFiddle 示例

于 2013-03-08T18:48:41.443 回答