I am trying to create a layout with a flex container containing 2 divs - one with an image that floats left, and the other with some paragraphs floating right. How can I make sure that the image scales alongside the paragraphs while maintaining its aspect ratio?
.container_family {
display: flex;
justify-content: center;
flex-direction: row;
}
.container_family .main-block{
float: right;
order: 2;
padding: 0 3%;
background-color: #001e4c;
flex-basis: 100%;
}
.container_family .sidebar{
float: left;
order: 1;
height: min-content;
}
img#Mom-profile-photo{
resize: both;
object-fit: cover;
} <div class="container_family">
<div class="main-block">
<p>
Some sample text.
</p>
<p>
More sample text.
</p>
</div>
<div class="sidebar">
<img id ="Mom-profile-photo" src="images/Mom_profile.jpg" alt="Profile picture of Ingrid (mother)">
</div>
</div>