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的宽度制作img显示并拉伸它的高度。我也希望div伸展自己适合img。这可能吗？

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

Answer 2

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

img {
    width:inherit;
}

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

JSFiddle example

Answer 3

不，你不能使img伸展以适应div并同时实现逆。你会有一个无限的大小调整循环。但是，您可以从其他答案中获取一些注释并实现一些最小和最大尺寸，但这不是问题。

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

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

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

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

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

3 个答案: