Sertakan teks dalam imej apabila mengubah saiz

Question

Saya ingin memasukkan perenggan dalam imej tetapi ia sentiasa melimpah.

Saya mahu imej diubah saiznya dengan cukup panjang sehingga panjang seperti perenggan.

Saya cuba menggunakan min-height tetapi tidak berkesan.

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

Saya membayangkan bahawa menggunakan ketinggian min akan mengubah saiz bekas kepada skrinnya apabila diubah saiznya, sekali gus mengubah saiz imej, tetapi tidak demikian.

Answer 1

Saya mengesyorkan melihat perkara sebaliknya.

Ia adalah teks yang ketinggian induknya mesti ditetapkan, jadi nilai mutlak tidak akan berfungsi.

Jika anda menetapkan imej sebagai imej latar belakang ibu bapa dan membuat ibu bapa mengikut saiz teks, imej (kulit saiz yang diberikan) akan mengisi ruang yang diperlukan secara automatik.

Berikut ialah contoh mudah berdasarkan CSS yang anda berikan:

.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