没有铺满容器效果

加上CSS后，铺满容器的效果

<div class="item">
<div class="itemImg"><img src="/imgs/1.jpg"/></div>
<p>股市突破历史新高</p>
</div><style>
div.item .itemImg img
{
object-fit: contain;
width: 100%;
height: 100%;
}
</style>

兼容IE代码（作者亲测兼容IE11）

前端html代码结构

<div v-else class="shopItems"><div class="shopItems-img"><img src="./img1.jpg"/></div><p class="name">图片1</p>
</div>

css代码

.shopItems {width: 3.4rem;height: auto;overflow: hidden;//IE重点改造background: #ffffff;border-radius: 0.1rem;margin-bottom: 10px;
}.shopItems:nth-child(2n + 0) {margin-left: 0.14rem;
}
.shopItems .shopItems-img
{width: 100%;//IE重点改造height: 3.4rem;background-color: #f4f4f4;display: flex;//IE重点改造justify-content: center;//IE重点改造align-items: center;//IE重点改造overflow: hidden;//IE重点改造
}
.shopItems img {width: 100% !important;//IE重点改造height: auto;//IE重点改造object-fit: contain;
}
.shopItems .name {font-size: 0.28rem;line-height: 0.4rem;/* identical to box height, or 100% */color: #333333;width: 100%;margin-top: 0.1rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
}

你可能还需要了解

引入vue.js的项目如何实现ie兼容_cplvfx的博客-CSDN博客_browser.min.js下载

IE低版本提示下载新的浏览器js--IEOutTips.zip_cplvfx的博客-CSDN博客_browser-polyfill.min.js

图片不变形的情况下铺满整个容器，另有兼容IE代码相关推荐

python 批量处理图片文件（做到图片不变形）
对此次项目中主要涉及到的内容做以下说明: 1.需要收集大量资料(包括收集不同信息和图片): 2.资料太多需要做同样的操作处理(包括修改文件名和修改图片尺寸). 一.修改文件名 import os os ...
HTML图片不能上下铺满屏幕_多张图片的PPT，如何排版的更有创意？
Hello,大家好,我是利兄~ 在制作PPT的过程中,我们经常会遇到图片排版的问题,尤其是多张图片排版的问题. 通常情况下,遇到多张图片,我们会采用矩阵排版,也就是将图片进行并列的排布. 一组,两组, ...
在背景色和背景图片同时存在的情况下，为什么还要设置背景色？
在背景色和背景图片同时存在的情况下,会显示背景图片: 两者都要设置是因为 : 1:考虑到大屏下(如1920*1080或者更大)网站背景图不足以撑满整个显示区域,所以背景图以外的部分要显示背景色,并且背 ...
html图片显示变形,CSS完美解决前端图片变形问题的方法
在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一.让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中: div{ width: 200px; height: ...
html怎么使图片自动填充,CSS怎么将img图片填满父容器div自适应容器大小
CSS怎么将img图片填满父容器div自适应容器大小发布时间:2021-03-19 09:35:26 来源:亿速云阅读:114 作者:小新这篇文章将为大家详细讲解有关CSS怎么将img图片填满父 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧（转）
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...
css如何控制图片不变形？
在做网页时会遇到许多的问题,有的时候会遇到图片变形的问题,我们该如何通过css控制图片不变形呢?下面我们来看一下通过css控制图片不变形的方法. 如果想要图片不变形就是设置max-height或者ma ...
在word文档表中插入图片不变形
在word文档表中插入图片不变形目录在word文档表中插入图片不变形 1.点击左上角[全选图标 ]选中表格,鼠标右键点击[表格属性] 2.点击[选项]点击取消勾选[自动重调尺寸以适应内容],最后 ...

图片不变形的情况下铺满整个容器，另有兼容IE代码

兼容IE代码（作者亲测兼容IE11）

前端html代码结构

css代码

你可能还需要了解

图片不变形的情况下铺满整个容器，另有兼容IE代码相关推荐

最新文章

热门文章