containing a text inside an image while ir resize-CodePudding

I want to have a paragraph in an image, but it keeps overflowing.

I want the image to resize long enough, as long as the paragraph.

I have tried to use the min height but it doesn't work.

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

I imagine using the min height would resize the container according to its screen when it resize, thus resizing the image, but it doesn't.

CodePudding user response：

I suggest looking at things the other way round.

It's the text that has to set the height of the parent, so having it absolute won't work.

If you make the image a background-image to the parent, and make the parent follow the text size then the image (given size cover) will automatically fill the required space.

Here's a simple example based on the CSS you gave:

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

<div >
  <div >a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a
    line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a
    line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a
    line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a
    line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a
    line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>a line of text<br>
  </div>
</div>

CodePudding user response：

Have you tried heigth: fit-content;?