search

Home  >  Q&A  >  body text

Include text in image when resizing

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.

P粉458913655P粉458913655281 days ago461

reply all(1)I'll reply

  • P粉627027031

    P粉6270270312024-03-21 10:37:22

    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

    reply
    0
  • Cancelreply