saber酱的抱枕

努力变强

05/7
08:09
学习

css flex 布局时图片变形的问题

在 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 父元素,里面直接是图片,图片如下:

css flex 布局时图片变形的问题

当我们给图片设置宽度 100px 时,问题出现了:

css flex 布局时图片变形的问题

以上是 demo,实际上我在手机站里遇到过这样的情况,手机站实际浏览时等比缩小了,图片渲染后的宽度比真实宽度小,结果宽度变了高度没变。

解决方法:

1.给图片设置 align-self: flex-start;

2.给每个 img 元素外面套个父元素,父元素 width: 100px;,img 元素 max-width: 100%;,这样就可以照常自适应了。

解决后如下:

css flex 布局时图片变形的问题


这个问题的原因似乎因为 img 元素是“替换元素”。但具体的解释我也不清楚。

css flex 布局时图片变形的问题