Comment utiliser CSS pour centrer l'image lorsqu'elle est plus grande que le div (exemple de code)

Cet article vous présentera comment utiliser le CSS pour réaliser l'affichage centré des images lorsqu'elles sont plus grandes que les div (exemples de code). Les amis dans le besoin pourront s'y référer. utile pour vous.

Lorsque l'image est plus grande que p, vous souhaitez que l'image soit affichée au centre. Si l'image est réduite, l'image peut ne pas remplir tout le p. Si vous ne définissez pas directement la largeur et. hauteur de l'image, définissez son p externe sur overflow:hidden ; À ce stade, même si le p externe est défini pour être centré horizontalement et verticalement, l'image n'est pas centrée :

Solution :

1- Définir l'image comme image d'arrière-plan

<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- Définir la largeur et la hauteur de l'image à 100 % par rapport à p, puis définir l'ajustement de l'objet :cover;

<div class="face-img-contain-new-new">
    <img src="../images/face-img/test-22.png" alt="" class="face-img-defined1" id="face-img-photo">
</div>

.face-img-contain-new-new{
    width:348px;
    height:436px;
    margin:0 auto;
    margin-top: 14px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 1px solid gainsboro;
}
.face-img-defined1{
    width:100%;
    height:100%;
    object-fit:cover;
}

Résumé : C'est tout. Nous espérons que l'ensemble du contenu de cet article sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo sur les bases de CSS  !

Recommandations associées :

Manuel CSS en ligne

Tutoriel graphique div/css

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!