具有图像 100% 的 div 的自动高度答案

【问题标题】：Auto height of a div with image 100%具有图像 100% 的 div 的自动高度
【发布时间】：2019-12-20 13:01:38
【问题描述】：

我有以下布局：

CSS

.top-container{
width:100%;
height:auto;
position:relative;
}
.top-container img{
width:100%;
height:100%;
position:absolute;
z-index:1;
}

HTML

<div class="top-container">
<img src="blahblah" />
</div>

我的问题是我需要图像宽度为 100%（这实际上是有效的），但由于 100% 的宽度，高度必须具有自动高度。我试过了 height:auto。但这当然没有帮助。它有助于特定高度，但随后图像缩放错误。

有什么建议吗？

【问题讨论】：

【解决方案1】：

只需对您的图像 css 进行一些小改动，如下所示：

.top-container img{
    width:100%;
    height:auto !important;
    position:absolute;
    z-index:1;
}

【讨论】：

【解决方案2】：

试试这个

使用 height:100vh 并删除 100%;

.top-container{
width:100%;
height:auto;
position:relative;
}
.top-container img{
width:100%;
height:100vh;
position:absolute;
z-index:1;   
}

【讨论】：

【解决方案3】：

CSS

.top-container{
width:100%;
height:auto;
position:relative;
}
.top-container img{
width:100%;
height:auto;
position:absolute;
z-index:1;
}

HTML

<div class="top-container">
<img src="blahblah" />
</div>

我已将您的 coe 中的 height:100% 更改为 height:auto。它现在应该可以工作了。

【讨论】：

【解决方案4】：

不确定高度是否是您正在寻找的，但请参见下文。

.top-container{
width:100%;
border: 1px solid black
}
.top-container img{
width: 100%
}

【讨论】：