CSS实现图片自适应缩放,填满容器
在项目中插入图片,想按照图片比例自适应宽高缩放,填满容器使用 object-fit: cover;即可实现.goods_img {width: 100%;height: 100%;object-fit: cover;}<el-carousel v-if="details.picNums > 0" :interval="5000" arrow="always"><el-car
·
在项目中插入图片,
想按照图片比例自适应宽高缩放,填满容器
使用 object-fit: cover;
即可实现
.goods_img {
width: 100%;
height: 100%;
object-fit: cover;
}
<el-carousel v-if="details.picNums > 0" :interval="5000" arrow="always">
<el-carousel-item v-for="item in details.pics" :key="item.pics_id">
<img class="goods_img" :src="item.pics_sma_url">
</el-carousel-item>
</el-carousel>
效果展示
参考MDN: object-fit 属性
更多推荐
已为社区贡献1条内容
所有评论(0)