CODEWITHSUNDEEP
htmlcss
Romans
Romans

Reputation: 485

How to make image scale as subordinate with container

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>

Upvotes: 0

Views: 26

Answers (1)

MaDragon7
MaDragon7

Reputation: 1313

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>

Upvotes: 2

Related Questions