Image as in flexbox container

First item in my flexbox container is image. How would I set up this item that as the size of browser window shrinks so will the image.

If you don’t want the image to exceed it’s native width then set a max-width on the img rules.
The image will get nested in it’s own wrapping div. That div will control the scaling of the image.

.imgwrap {
   width: 100%; /*or whatever you choose*/
   margin: auto;
}
.imgwrap img {
   display: block;
   width: 100%;
   max-width: 500px; /*actual image width*/
   height: auto; /* maintain aspect ratio*/
   margin: auto; /*optional centering of image*/
}
<div class="imgwrap">
   <img src="#" width="500px" height="500" alt="Image Alt Text">
</div>

It sounds like you want something similar to his question that was asked the other day.

The image height fills all the available height and width but is purely controlled by the text content in the element next to it.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.