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

【问题标题】：CSS - how to make image container width fixed and height auto stretchedCSS - 如何使图像容器宽度固定并自动拉伸高度
【发布时间】：2018-10-17 08:03:33
【问题描述】：

我已经编写了一些像这样的 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。这可能吗？

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

非常感谢朋友！这就是我想要的

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案3】：

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

img {
    width:inherit;
}

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

JSFiddle example

【讨论】：