Fügen Sie beim Ändern der Größe Text in das Bild ein

Question

Ich möchte einen Absatz in das Bild einfügen, aber er läuft immer über.

Ich möchte, dass die Größe des Bilds so lange geändert wird, dass es genauso lang ist wie der Absatz.

Ich habe versucht, min-height zu verwenden, aber es funktioniert nicht.

.image-container{
  position: relative;
  min-height:100vh;
  width: 100%;
  justify-content:center;
  align-items:center;
  display:flex;
}

.truck-image{
  position: relative;
  top:50px;
  object-fit: cover;
  width:100%;
  height:100%;
}

.text-container{
  position: absolute;
  top:110px;
  left:0;
  padding-left: 100px;
  width:30%;
  color:white;
  z-index:3;
}

Ich habe mir vorgestellt, dass die Verwendung von „min-height“ die Größe des Containers an seinen Bildschirm anpassen würde, wenn die Größe geändert wird, und somit auch die Größe des Bildes, aber das ist nicht der Fall.

Answer 1

我建议以相反的方式看待事情。

它是必须设置父级高度的文本，因此绝对值是行不通的。

如果您将图像设置为父级的背景图像，并使父级遵循文本大小，则图像（给定大小的封面）将自动填充所需的空间。

这是一个基于您提供的 CSS 的简单示例：

.image-container {
  position: relative;
  min-height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  background-image: url(https://picsum.photos/id/1016/1024/768);
  background-size: cover;
}

.text-container {
  position: relative;
  top: 110px;
  left: 0;
  padding-left: 100px;
  width: 30%;
  color: white;
  z-index: 3;
}

  
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a
    line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a
    line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a
    line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a
    line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a
    line of text
a line of text
a line of text
a line of text
a line of text
a line of text
a line of text