css使用百比分来控制图片的显示

今天在小程序里要写一个 component ，但是这个component 的宽度又不能写死了，不利于复用 如图 

 图上的红框区域就是我想要写的 components

从图上可以看到 这里是三张图 ，那么它的宽度应该是 33%  但是写死了33%, 如果要求一行只有两个呢，四个呢，难道又要写一个component吗

这个问题我想到的办法是  从父组件传参的方式 ，也就是说一行显示几个 由父组件传一个参数  lineNum  传入组件，再通过组件的生命周期函数  attached  得到 lineNum 然后计算出宽度的百分比，  在组件的 wxml中，使用style="width=xxx" 来动态设置宽度

wxml文件如下

这样子就动态的设置了每一行能显示多少个

这样就完了吗？没有，还没完呢，那上面可以是有图片的，（图片是一个正方形的图片，这里就降低了一下难度），好吧，就算lineNum是3吧，便于说明 ，那么图片的宽度就是 33%  图片的高度，设置多少呢，设置100%，不可能，设置33% ？也不对

如上图的  .goods_wrapper 的宽度是 33%；

把 .image-wrapper 的宽度设 为 100%； 它的高度怎么做呢  这里就是 css 的一个技巧   不要设置它的高  为它设置一个 padding-top:100%;这时，它就会以宽的长度，给内部设定一个高度； 再设置一个 position:relative top:0 left:0;

把 因为图片是圆形的 所以我又在图片的外层加了一个 .img-wrapper  将其设置 position:absolute 就可以了

说不很清楚，上css 代码

这样图片就可以自适应的变大变小了