沒有鋪滿容器效果

加上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代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。