Inclure du texte dans l'image lors du redimensionnement

Question

Je souhaite inclure un paragraphe dans l'image mais il déborde toujours.

Je souhaite que l'image soit redimensionnée suffisamment longtemps pour être aussi longue que le paragraphe.

J'ai essayé d'utiliser min-height mais cela ne fonctionne pas.

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

J'imaginais qu'utiliser min-height redimensionnerait le conteneur à son écran une fois redimensionné, redimensionnant ainsi l'image, mais ce n'est pas le cas.

Answer 1

Je recommande de regarder les choses dans l’autre sens.

C'est du texte dont la hauteur parent doit être définie, donc les valeurs absolues ne fonctionneront pas.

Si vous définissez une image comme image d'arrière-plan du parent et faites en sorte que le parent suive la taille du texte, l'image (d'une couverture de taille donnée) remplira automatiquement l'espace requis.

Voici un exemple simple basé sur le CSS que vous avez fourni :

.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