忽略高度样式中的 img 标签答案

【问题标题】：Ignoring img tags in height styling忽略高度样式中的 img 标签
【发布时间】：2021-05-18 12:10:17
【问题描述】：

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

如果我使用 background-image 而不是 inline img 标签，这将很容易解决，但 img 标签更易于访问，并且在 Gatsby 等静态网站系统中具有更多功能支持。

所以，我试图以仅考虑文本而不考虑子 img 标签的方式设置高度。

我不是 CSS 大师，所以我想知道是否有一种我没有考虑的方法。

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

【问题讨论】：

嗨，约翰。请在此处粘贴您的代码（即使链接有效）。仅供参考，您的链接无效。
你能解释一下你想用图像发生什么吗？它是包含在最终的 div 中，还是覆盖它或宽度为 100% 或 ....

标签： css

【解决方案1】：

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

div{
  min-height: 8rem; 
}

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

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

【讨论】：

【解决方案2】：

叠加层的概念是一个“相对”定位的容器，其中包含一个图像和一个“绝对”定位的文本。该图像是响应式图像，因此图像将在较小的屏幕上保持正确的纵横比。文本将位于容器中的某个位置，使用顶部、左侧和宽度设置来调整它以适应您的布局。

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

一个例子：

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>

【讨论】：