CSS fills the parent container div with img images and adapts to the container size

When multiple images are introduced into a page, the image sizes may be inconsistent. However, if we want to display them in a consistent size, directly setting the image size will cause the image to deform. This is the problem we encountered. Let's see the solution.

<div>
        <img src="imported image address" alt="">
</div>

Method 1: Center the img element vertically and set its height and width to a minimum full-screen value

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

Method 2: Set the CSS style of img and add object-fit: cover, which is similar to the background-size: cover of the background image in CSS3;

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

This is the end of this article about how to use CSS to fill the parent container div with img images and adapt to the container size. For more related information about how to use CSS to fill the parent container content with img, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!