<center>如何用纯CSS将图片填满div</center>

桃扇骨 2024-04-19 14:27 48阅读 0赞

### 如何用纯CSS将图片填满div ###

### object-fit解决方法： ###

直接给img套用一个object-fit:cover;让img填满盒模型

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

这个方法很简单也很实用，也符合理论上对盒模型和IMG容器的解释。因为img本来也是一个容器，只不过它是公认的用来引导图片的容器，用替换法把图片替换成覆盖的尺寸就是我要的效果。这个思路在理论上都是正确的。  
但由于是新代码，在一些浏览器上还不兼容。回退机制上，如果浏览器不认识object-fit，那整个图片就会被强制拉伸成容器的尺寸。所以在回退机制上有待解决！

### object-fit解决方法： ###

通过对img元素垂直居中，并将它的高度和宽度设置一个最小满屏值，这样，也能让图片铺满容器：

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

图片高度或宽度任意一尺寸小于容器时，这个情况是正常的，但如果图片的高度和宽度尺寸都大于容器，图片也能铺满，但容器就只显示大图的中间部分。这就是这个方法的缺陷。

### 将图片设置为背景图解决方法： ###

<div class="img"></div>
    
    div.img {
                width: 400px;
                height: 200px;
                background-image: url(http://img5.imgtn.bdimg.com/it/u=4021999557,1995524928&fm=11&gp=0.jpg);
                -webkit-background-size:cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }