国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

社群

學(xué)習(xí)

工具庫

AI工具

休閒

繁體中文

在調(diào)整大小時在圖像中包含文本

P粉458913655 2024-03-20 11:25:39

594

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

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

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

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

我想使用最小高度會在調(diào)整大小時根據(jù)其螢?zāi)徽{(diào)整容器的大小，從而調(diào)整圖像的大小，但事實並非如此。

P粉458913655

全部回覆(1)

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

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

它是必須設(shè)定父級高度的文本，因此絕對值是行不通的。

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

這是一個基於您提供的 CSS 的簡單範(fàn)例：

.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

新增回覆

熱門專題

更多>