忽略高度样式中的img标记

Question

我想控制div的高度，使其始终至少为8rem高，然后随着文本换行而增长。该文本将覆盖在带有img标记的图像上，因此根据内容将高度设置为增长将考虑img标记和文本。

如果我使用背景图像而不是内联img标签，这将很容易解决，但img标签更易于访问，并且在Gatsby等静态网站系统中有更多的功能支持。

因此，我试图以这样一种方式设置高度，即只考虑文本，而不考虑子img标记。

我不是CSS大师，所以我想知道是否有一种方法可以做到这一点，我没有考虑。

下面是一个包含更多上下文的代码笔：https://hod.ge/css-hgt

Answer 1

您可以对该div使用min-height属性。例如：

div{
min-height: 8rem; 
}

参考：[1]https://www.w3schools.com/cssref/pr_dim_min-height.asp添加的内容越多，div的高度就会增加。

我完全没有得到图像部分。如果我找到任何线索，我会给你回复的。。。

Answer 2

覆盖的概念是一个"相对"定位的容器，包含一个图像和一个"绝对"定位的文本。该图像是一个响应图像，因此该图像将在较小的屏幕上保持正确的纵横比。文本将被放置在容器中的某个位置，使用顶部&左&宽度设置，以根据您的布局进行调整。

在给覆盖容器正确的大小后，图像和文本将响应该大小。正如你所要求的，最小高度是8雷姆。

一个例子：

body {
font: 400 1rem/1.1 "Segoe UI", Arial, sans-serif;
}
.overlay {
position: relative;
width: 120px;
min-height: 8rem;
background-color: #eee;
font-size: 0.75rem;
}
.overlay-img {
width: 100%;
height: auto;
border: 0;
}
.overlay-text {
position: absolute;
top: 0.5rem;
left: 10%;
width: 80%;
text-align: center;
color: grey;
}
.overlay p {
margin: 0;
padding: 0 10px;
}

<div class="overlay">
<img class="overlay-img" src="https://picsum.photos/id/206/300/200">
<div class="overlay-text">Some text</div>
<p>The description of this photo.</p>
</div>