记一次flex-shrink的问题

mobile的轮播图的错误显示问题,大概也就是320宽的屏幕,4张图,每张图显示只有80px
1.flex-shrink的默认值是1,所以算法也就是
originImageWidth(我的测试图为750) - width * flex-shrink/weight * totalWidth
2.以一张750图为例,在宽度是320的屏幕里,可套公式:
750 - 750*1/3000 * 2680 = 80,此时收缩因子为0.25,此时收缩因子为0.25,2680是四张图3000的宽度-屏宽320也,
就得出了正确结论,这个就是导致轮播图宽度只有80的结果
解决办法也很简单:思路和伪代码
<div class='wrapper'>
img * 4
</div>
less:
.wrapper{
width:100%;flex-shrink:0
&img{
width:100%
}
}
也就是先将div宽度先适应成屏宽,然后使其内部img适应当前div宽度,因为flex-shrink:0导致收缩因子为0,所以可以使用两个百分比控制宽高
图一对应flex-shrink默认为1
图二对应flex-shrink:0
图三对应未使用百分比情况,导致图片回归本身大小

记一次flex-shrink的问题

记一次flex-shrink的问题

记一次flex-shrink的问题