一、需求介绍:列表页的图片,在规定的宽高内,居中展示,不影响清晰度。
二、如图:
三、方法(推荐使用)
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>