CSS图片铺满div的实现方法

1

2

3

<div>

        <img src="引入图片地址" alt="" class="Img">

</div>

1

2

3

4

5

6

7

8

9

div{

　　width: 500px;

　　height: 500px;

}

.Img{

    width: 100%;

    height: 100%;

    object-fit:cover;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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%);

}

1

<div class="container"></div>

1

2

3

4

5

6

7

.container{

                height: 500px;

                width: 500px;

                margin: 0px auto;

                background: url('../Status/img/health.png') no-repeat;

                background-size: cover;

            }