前段时间给社团建官网（推销一波，https://hitszqmaker.github.io ），今天想起来打开看了一下，结果发现了问题。

关键它奇特在Chrome浏览器里屁事没有，一换到其他浏览器，不管有没有用Chrome内核，通通扑街。为此我还特意多下载了几个浏览器测试，包括手机，发发现果真如此。

但是flex布局是2009年被提出的，早就被各大浏览器全面支持的了。

一、flex-shrink: 0

经过查阅，发现是因为flex-shrink属性，flex-shrink属性默认为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。设置为0表示不收缩。

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

所以第一种方法就是将img元素添加属性flex-shrink: 0。

二、height: 100%

在父元素没有设置高度的情况下，给图片设置height: 100%;

用div标签包裹图片，这种方案比较通用，缺点：产生无用标签。