So verwenden Sie CSS, um das Bild zu zentrieren, wenn es größer als das Div ist (Codebeispiel)

In diesem Artikel erfahren Sie, wie Sie mit CSS die zentrierte Anzeige von Bildern realisieren, wenn diese größer als Divs sind. Ich hoffe, dass dies für Freunde in Not hilfreich ist hilfreich für Sie.

Wenn das Bild größer als p ist, soll das Bild in der Mitte angezeigt werden. Wenn das Bild verkleinert wird, füllt es möglicherweise nicht die gesamte Breite aus Höhe des Bildes, setzen Sie sein äußeres p auf overflow:hidden ;Auch wenn das äußere p auf horizontal und vertikal zentriert eingestellt ist, ist das Bild zu diesem Zeitpunkt nicht zentriert:

Lösung:

1- Legen Sie das Bild als Hintergrundbild fest

<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- Stellen Sie die Breite und Höhe des Bildes relativ zu 100 % von p ein und stellen Sie dann object-fit:cover ein. Weitere verwandte Tutorials finden Sie unter
Video-Tutorial zu CSS-Grundlagen

!

Verwandte Empfehlungen:

CSS-Online-Handbuch

Div/CSS-Grafik-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um das Bild zu zentrieren, wenn es größer als das Div ist (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!