05/7
2019
在 css 的 flex 布局里，有些情况下，如果图片展现时的宽度比其原始宽度小，可能发生变形。这可以通过给图片设置 align-self: flex-start; 来解决。
以下是详情。
如下代码：
<style>
.box {
width: 600px;
display: flex;
justify-content: space-between;
}
img {
width: 100px;
/* align-self: flex-start; */
}
</style>
<div class="box">
<img src="67103860.jpg" alt="">
<img src="67103860.jpg" alt="">
<img src="67103860.jpg" alt="">
<img src="67103860.jpg" alt="">
<img src="67103860.jpg" alt="">
</div>
外层 div 是 flex 父元素，里面直接是图片，图片如下：
当我们给图片设置宽度 100px 时，问题出现了：
以上是 demo，实际上我在手机站里遇到过这样的情况，手机站实际浏览时等比缩小了，图片渲染后的宽度比真实宽度小，结果宽度变了高度没变。
解决方法：
1.给图片设置 align-self: flex-start;。
2.给每个 img 元素外面套个父元素，父元素 width: 100px;，img 元素 max-width: 100%;，这样就可以照常自适应了。
解决后如下：
这个问题的原因似乎因为 img 元素是“替换元素”。但具体的解释我也不清楚。
