How to make image scale as subordinate with container - html

Question

I have a flex container with 2 div's. The one div contains the image (floats left), and the other some paragraphs (floats right). How do I make it so that the image scales with the paragraphs, but keeps its aspect ratio to some degree?
.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 text.
</p>
<p>
some text.
</p>
</div>
<div class="sidebar">
<img id ="Mom-profile-photo" src="images/Mom_profile.jpg" alt="Profile picture of Ingrid (mother)">
</div>
</div>

Answer 1

there are different ways to do that according to your purpose. for example, you can set a fixed height for the container_family and then give the image the same fixed height
.container_family {
display: flex;
justify-content: center;
flex-direction: row;
height: 150px;
position: relative;
}
.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;
height: 150px;
}
<div class="container_family">
<div class="main-block">
<p>
some text.
</p>
<p>
some text.
</p>
</div>
<div class="sidebar">
<img id ="Mom-profile-photo" src="https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_960_720.jpg" alt="Profile picture of Ingrid (mother)">
</div>
</div>