display:flex布局,防止图片被压缩flex-shrink: 0

设置了固定宽高的图片被压缩

通常实现如下的效果,是把外层容器设置为display:flex,容器中图片设置固定宽高度,右边元素设置为flex:1,但当右边元素宽度超出剩余空间的时候,图片会被挤压,变成椭圆形。

这是因为在flex容器中,当空间不够的时候,flex-shrink不为0的元素会被压缩,所以解决的方法就是给图片设置:flex-shrink:0。

.existCollages .row image {
40px;
height: 40px;
border-radius: 50%;
margin-right: 8px;
flex-shrink: 0;/*防止被压缩*/
}

 
原文地址:https://www.cnblogs.com/fdxjava/p/14433140.html