如何使图像弯曲到它的宽度？ [英] How to make image flex to it's width?

问题描述

如何防止我的图像被拉伸到自然的200px宽度？

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

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

解决方案

取出图像的曲线并将最大宽度设置为100％。这将允许图像增长到它的最大尺寸，并缩小，如果它的父母缩小。然后添加align-items：flex-start到容器。这将使纵横比保持不变，如果收缩。

footer {显示：flex; align-items：flex-start;} img {margin：1em;最大宽度：100％;}

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

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>

解决方案

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>

这篇关于如何使图像弯曲到它的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！