How to use CSS to fill the parent container div with img images and adjust 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 concludes this article on how to use CSS to fill the parent container div with img images and achieve adaptive container size. For more information about how to use CSS to fill container content with img images, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!