css - 如何使图像 flex 到它的宽度？

Question

如何防止我的图像被拉伸(stretch)超过其自然宽度 200 像素？

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

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

Answer 1

您可以将它扔进一个简单的容器中，然后用它来 flex :

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

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