CODEWITHSUNDEEP
htmlcss
adrian
adrian

Reputation: 1

containing a text inside an image while ir resize

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.

Upvotes: 0

Views: 36

Answers (2)

Markus Franzen
Markus Franzen

Reputation: 11

Have you tried heigth: fit-content;? This should automatically adjust the height to the content. The same is also possible with the width. This website could help.

Upvotes: 1

A Haworth
A Haworth

Reputation: 36467

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 class="image-container">
  <div class="text-container">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>

Upvotes: 1

Related Questions