Question

我想控制一个 div 的高度，所以它总是至少 8rem 高，然后随着文本换行到新行而增长。此文本将覆盖在使用 img 标签拉入的图像上，因此根据内容设置高度将同时考虑 img 标签和文本。

如果我使用 background-image 而不是内联 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

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

在为覆盖容器提供正确的大小后，图像和文本将响应该大小。正如您所要求的，最小高度为 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>

忽略高度样式中的 img 标签

2 个答案: