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>

回答1:

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>

回答2:

You could toss it into a simple container, and use that for flexing:

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

footer {
  display: flex;
}
div {
  flex: 1;
  margin: 1em;
}
img {
  max-width: 100%;
}

来源：https://stackoverflow.com/questions/39761602/how-to-make-image-flex-to-its-width