How to implement CSS images filled with divs

The first structure: the picture is a child element

 <div>
        <img src="Introduce image address" alt="" class="Img">
</div>

Method 1: Add object-fit:cover to the img element

 div{
width: 500px;
height: 500px;
}
.Img{
    width: 100%;
    height: 100%;
    object-fit:cover;
}

Method 2: Center the img element vertically, and set the minimum width and height to full screen

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

The second structure: the picture is a background picture

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

Method: Add background-size: cover to the div element; set the image to non-repeat no-repeat

 .container{
				height: 500px;
				width: 500px;
				margin: 0px auto;
				background: url('../Status/img/health.png') no-repeat;
				background-size: cover;
			}

This concludes this article about how to fill a div with CSS images. For more information about how to fill a div with CSS images, please search the previous articles on downcodes.com or continue to browse the related articles below. I hope you will support downcodes in the future. .com!