hendry hendry - 2 months ago 12
CSS Question

How to make image flex to it's width?

how do I prevent my image from being stretched over it's natural 200px width?



footer {
display: flex;
}
img {
flex: 1;
margin: 1em;
}

<footer>
<img src=http://www.placebacon.net/200/150>
</footer>




Answer

Take the flex off of the image and set max-width to 100%. This will allow the image to grow to it's max size and shrink if it's parent shrinks. Then add align-items: flex-start to the container. This will allow the aspect ratio to remain intact if it shrinks.

footer {
  display: flex;
  align-items: flex-start;
}
img {
  margin: 1em;
  max-width: 100%;
}
<footer>
  <img src=http://www.placebacon.net/200/150>
</footer>