這篇文章給大家分享的是有關(guān)CSS如何將img圖片填滿父容器div并自適應(yīng)容器大小的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司主打移動(dòng)網(wǎng)站、成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護(hù)、國際域名空間、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實(shí)力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再?zèng)Q定采用什么樣的設(shè)計(jì)。最后，要實(shí)現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計(jì)，我們還會(huì)規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。

當(dāng)一個(gè)頁面中引入多張圖片時(shí)候，會(huì)碰到圖片尺寸不一致，單要求顯示成一致的大小，我們直接設(shè)置圖片尺寸會(huì)導(dǎo)致圖片變形，這就是我們遇到的問題，看下解決方法

方法一：對(duì)img元素垂直居中，并將它的高度和寬度設(shè)置一個(gè)最小滿屏值

div{
    position:relative;
　 width: 100px;
    height: 100px;
    overflow:hidden;
}
 div img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    min-width: 100%;
    min-height: 100%;
    transform:translate(-50%,-50%);
}

方法二：設(shè)置img的css樣式增加 object-fit:cover 類似于css3中背景圖片的background-size: cover;

div{
　　width: 100px;
　　height: 100px;
 
}
div img{
    width: 100%;
    height: 100%;
    object-fit:cover;
}

感謝各位的閱讀！關(guān)于“CSS如何將img圖片填滿父容器div并自適應(yīng)容器大小”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！