微信朋友圈图片样式实现方法

一、需求介绍：列表页的图片，在规定的宽高内，居中展示，不影响清晰度。

二、如图：

三、方法(推荐使用)
1.使用弹性盒，宽度固定，高度不固定。

<div v-for="(item,i) in imgList" :key="i" class="imgClass">
      <img :src="item.img"/>
</div>

.imgClass{
      width: 48%;
	  height: 69px;
	  margin-bottom: 6px;
	  overflow: hidden;//父盒子做超出部门隐藏
	  //弹性盒-兼容设置
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      //居中设置-兼容设置
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
     img{
        width: 100%;
        border-radius: 2px;
     }
}

2.使用背景图设置

 <span :style="{
        'background-image': `url(${item.url})`,
         'background-size':'cover',
         'background-position':' center',
         'background-repeat': 'no-repeat',
         'width':'100%',
         'height':'100%',
        'display':'block'
 }"></span>