I have a div where an image and content are inside. I am trying to make the background image adjust its size based on the content within it, rather than showing the full image size with empty space.
My current styling uses flexbox:
.section {
height: 100%;
.section_image {
position: relative;
height: 100%;
display: flex;
flex: 1 1 100%;
img {
object-fit: cover
}
}
.content {
position: absolute;
display: flex;
flex: 1 1 100%;
}
}<div className="section>
<div className="section_image">
<img src={Image} alt="" />
</div>
<div className="content">
<h1>Title</h1>
<p>Body Text</p>
</div>
</div>