Include text in image when resizing

Question

I want to include a paragraph in the image but it always overflows.

I want the image to be resized long enough to be as long as the paragraph.

I've tried using 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 imagined that using min-height would resize the container to its screen when resized, thus resizing the image, but that's not the case.

Answer 1

I suggest looking at things the other way around.

It's text whose parent height must be set, so absolute values ​​won't work.

If you set an image as the parent's background image and make the parent follow the text size, the image (of a given size cover) will automatically fill the required space.

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

.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