My goal is to include a paragraph within an image, but the text keeps overflowing beyond the boundaries.
I would like the image to resize proportionally to accommodate the length of the paragraph.
Despite attempting to use the min-height property, I have not been successful in achieving the desired result.
.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 had expected that using the min-height property would automatically adjust the container's size based on screen size changes, thereby resizing the image accordingly. Unfortunately, this has not been the case.