Html Question posted in
Some basic documentation can be found here.

Html – How to constrain image to available space in a flexbox

I am trying to get up to speed on using the Flexbox.

What I want to do is have a navigation panel on the left and a dynamic area on the right.

There is an issue with the dynamic area. The image does not constrain itself to the expected area, and so it overlays the Audio element.

How do I make the image constrain itself to the area that it should in the flexbox?

There could be multiple images and controls in the dynamic panel, so I want them all to fit within the expected area.

CodePen Example

.myContainer {
    outline: 5px dotted green;
    height: 88vh;
    display: flex;
    gap:25px;
    padding:25px;

}
.doOutline{
    outline: 1px dotted green;
}
.innerContainer{
    display:flex;
    flex-direction:column;
}
<div class="myContainer">
    <div class="doOutline" style="width:150px;"><p>Fixed Width Nav Panel</p></div>
    <div class="doOutline innerContainer">
        <audio controls src="https://aitutorcdn.blob.core.windows.net/images/BirdChirping.mp4"></audio>
        <img src="https://aitutorcdn.blob.core.windows.net/images/BirdChirping.jpeg">
    </div>
</div>
Tags:

2

Answers


  1. 0

    You could explicitly set the width and height of the image to 100%.

        .innerContainer img {
      width: 100%;
      height: 100%;
    }

    This could, however, cause the image to become distorted if the aspect ratio is changed:

    .myContainer {
    outline: 5px dotted green;
    height: 88vh;
    display: flex;
    gap:25px;
    padding:25px;

}
.doOutline{
    outline: 1px dotted green;
}
.innerContainer{
    display:flex;
    flex-direction:column;
}

.innerContainer img {
  width: 100%;
  height: 100%;
}
    <div class="myContainer">
    <div class="doOutline" style="width:150px;"><p>Fixed Width Nav Panel</p></div>
    <div class="doOutline innerContainer">
        <audio controls src="https://aitutorcdn.blob.core.windows.net/images/BirdChirping.mp4"></audio>
        <img src="https://aitutorcdn.blob.core.windows.net/images/BirdChirping.jpeg">
    </div>
</div>

    Unfortunately, this still covers up the audio player. You could move the image to the background:

    background-image: url(https://aitutorcdn.blob.core.windows.net/images/BirdChirping.jpeg);
background-size: cover;

    .myContainer {
    outline: 5px dotted green;
    height: 88vh;
    display: flex;
    gap:25px;
    padding:25px;

}
.doOutline{
    outline: 1px dotted green;
}
.innerContainer{
    display:flex;
    flex-direction:column;
    background-image: url(https://aitutorcdn.blob.core.windows.net/images/BirdChirping.jpeg);
    background-size: cover;
}
    <div class="myContainer">
    <div class="doOutline" style="width:150px;"><p>Fixed Width Nav Panel</p></div>
    <div class="doOutline innerContainer">
        <audio controls src="https://aitutorcdn.blob.core.windows.net/images/BirdChirping.mp4"></audio>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    Here is the updated code, you can add properties like this to adjust the image.

    reference: https://www.geeksforgeeks.org/how-to-auto-resize-image-in-css-flexbox-layout-and-keeping-aspect-ratio/

    Click here:
    here is the updated css

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search