CSS圖片鋪滿div的實(shí)現(xiàn)方法
發(fā)布時(shí)間：2024-09-19 14:27:20 作者：超級(jí)衛(wèi)星 
我要評(píng)論
我要評(píng)論在web開(kāi)發(fā)中,常常需要讓圖片完美鋪滿div容器,實(shí)現(xiàn)這一效果可以通過(guò)CSS中的object-fit屬性或背景圖片的background-size屬性,本文給大家介紹CSS圖片鋪滿div的實(shí)現(xiàn)方法，感興趣的朋友一起看看吧
第一種結(jié)構(gòu)：圖片是子元素
<div>
<img src="引入圖片地址" alt="" class="Img">
</div>方法一：img元素添加 object-fit:cover
div{
width: 500px;
height: 500px;
}
.Img{
width: 100%;
height: 100%;
object-fit:cover;
}方法二：img元素垂直居中，最小寬高都設(shè)置為滿屏
div{
width: 500px;
height: 500px;
position:relative;
overflow:hidden;
}
.Img{
position: absolute;
top: 50%;
left: 50%;
display: block;
min-width: 100%;
min-height: 100%;
transform:translate(-50%,-50%);
}第二種結(jié)構(gòu)：圖片是背景圖片
<div class="container"></div>
方法：div元素添加 background-size: cover;設(shè)置圖片為不重復(fù)no-repeat
.container{
height: 500px;
width: 500px;
margin: 0px auto;
background: url('../Status/img/health.png') no-repeat;
background-size: cover;
}到此這篇關(guān)于CSS圖片如何鋪滿div的文章就介紹到這了,更多相關(guān)css 圖片鋪滿div內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解CSS3原生支持div鋪滿瀏覽器的方法的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-30
