Image as in flexbox container

HTML & CSS
2

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>
Flexbox item wrapping
Centering image inside flexbox