suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

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.

P粉458913655P粉458913655281 Tage vor464

Antworte allen(1)Ich werde antworten

  • 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;
      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

    Antwort
    0
  • StornierenAntwort