如何使图像弯曲到它的宽度？答案

【问题标题】：How to make image flex to it's width?如何使图像弯曲到它的宽度？
【发布时间】：2016-09-29 13:23:11
【问题描述】：

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

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

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

【问题讨论】：

标签： css flexbox

【解决方案1】：

你可以把它扔进一个简单的容器里，然后用它来伸缩：

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

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

【讨论】：

【解决方案2】：

取消图像的弹性并将最大宽度设置为 100%。这将允许图像增长到最大尺寸并在其父级缩小时缩小。然后将 align-items: flex-start 添加到容器中。这将允许纵横比在缩小时保持不变。

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

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

【讨论】：