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.

https://codepen.io/paulobrien/details/baobra/

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.