在調整大小時在圖像中包含文本

Question

我想在圖像中包含一個段落，但它總是溢出。

我希望圖像的大小調整得夠長，與段落一樣長。

我嘗試過使用最小高度，但不起作用。

.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;
}

我想使用最小高度會在調整大小時根據其螢幕調整容器的大小，從而調整圖像的大小，但事實並非如此。

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;
  頂: 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