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-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 属性

CSS实现图片自适应缩放，填满容器相关推荐

CSS背景图片自适应缩放contain/cover
background-size: contain; background-repeat: no-repeat; background-position-x: center; background-po ...
css实现图片自适应缩放的两种方法
想要实现图片根据给定宽高来自适应缩放的时候,会想到什么属性?是object-fit: cover;吗? 来试一试!为了展示效果,我特地选了对称的图片.下面两个img元素都有一个div包裹,div设置固 ...
css实现图片自适应容器的几种方式
css实现图片自适应容器经常有这样一个场景,需要让图片自适应容器的大小. 1.img标签的方式我们马上就能想到,把width.height 设置为100%啊.来看一哈效果. <div cla ...
CSS实现图片自适应布局
CSS实现图片自适应布局最轻松的写法 <div class="container">// 这里图片尺寸为440X440像素,<img src="./i ...
css 背景图片自适应属性整理
本篇博客主要记录一些使用 css 对背景图片自适应的操作整合背景图片取消重复 background-image: url(image.jpg); background-repeat:no-repea ...
纯CSS实现图片自适应容器大小
图片自适应DIV盒子的大小 img{width: auto;height: auto;max-height: 100%;max-width: 100%; } 根据浏览器窗口大小,自动更改图片大小 &l ...
Qt TableView数据列宽度自适应, 横向填满表格
Qt开发,读取数据库数据,用TableView展示,发现字段少的时候,右边空出一大块,影响外观. 怎样让各列宽度自适应,填满表格区域呢? 网上找到了答案: https://stackoverflow. ...
CSS背景图片平铺占满整个浏览器，且固定住不随滚动条移动
背景图片平铺占满整个浏览器,且固定住不随滚动条移动的样式写法 body {background-image: url(../images/bakimg.jpg); background-size: 1 ...
使用CSS进行图片自适应的两个方法
1.object-fit 属性设置好图片的宽高,然后设置object-fit属性为contain就是常见的图片自适应效果. img {width: 400px;height: 400px;objec ...

CSS实现图片自适应缩放，填满容器

效果展示

参考MDN： object-fit 属性

CSS实现图片自适应缩放，填满容器相关推荐

最新文章

热门文章