How to use css to center the image when it is larger than the div (code example)

This article will introduce to you how to use css to realize the centered display of images when they are larger than divs (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When the picture is larger than p, you want the picture to be displayed in the center. If the picture is scaled down, the picture may not fill the entire p. If you directly do not set the width and height of the picture, set its outer p to overflow:hidden. ;At this time, even if the outer p is set to be horizontally and vertically centered, the picture is not centered:

Solution:

1- Set the picture as the background picture

<div class="face-img-contain" id="face-img-back">
 </div>

.face-img-contain{
    width:348px;
    height:436px;
    margin:0 auto;
    margin-top: 14px;
    position: relative;
    background-image: url(../images/face-img/test-22.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid gainsboro;
}

若是后台返回的地址，别忘了拼接方法正确
$("#face-img-back").css("background-image","url("+faceImg+")");

2- Set the width and height of the picture relative to 100% of p, and then set object-fit:cover; helped. For more related tutorials, please visit
CSS Basics Video Tutorial

!

Related recommendations:

CSS Online Manual

##div/css graphic tutorial

The above is the detailed content of How to use css to center the image when it is larger than the div (code example). For more information, please follow other related articles on the PHP Chinese website!