搜尋

首頁  >  問答  >  主體

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

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

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

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

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

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

P粉458913655P粉458913655281 天前460

全部回覆(1)我來回復

  • P粉627027031

    P粉6270270312024-03-21 10:37:22

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

    它是必須設定父級高度的文本,因此絕對值是行不通的。

    如果您將圖像設定為父級的背景圖像,並使父級遵循文字大小,則圖像(給定大小的封面)將自動填充所需的空間。

    這是一個基於您提供的 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

    回覆
    0
  • 取消回覆