Über die Methode der reaktionsschnellen und zentrierten Anzeige von CSS-Bannerbildern

In diesem Artikel wird hauptsächlich die Methode der responsiven Center-Anzeige von CSS-Bannerbildern vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

Auf der Startseite einer PC-Website ist das Bannerbild das größte Bild auf der Webseite und zieht gleichzeitig die gesamte Aufmerksamkeit auf sich Daher wirkt sich die Art und Weise, wie das Bannerbild angezeigt wird, direkt auf das Benutzererlebnis aus. Heute werden wir darüber sprechen, wie man das Bannerbild in den Ansichtsfenstern unterschiedlicher Größe zentriert.

Wir alle wissen, dass das Bild zentriert werden kann Durch die Anzeige des Attributs background-size: cover wird das Bild beim Dehnen des Fensters jedoch oft schrecklich, sodass wir das Bild trennen und die beiden Seiten des Bildes ausblenden können, um eine zentrierte Anzeige des Banners zu erreichen Bild in verschiedenen Größen. Der Zweck der

HTML-Struktur ist wie folgt

<p class="banner">
    ![](img/banner.jpg)
</p>

Der CSS-Stil ist wie folgt

body {
    overflow-x: hidden;
}
.banner {
    width: 1210px;
    margin: 0 auto;
}
.banner img {
    width: 1920px;
    margin: 0 -355px;
    vertical-align: middle;
}

Wenn die Breite des Ansichtsfensters und die Bildbreite gleich 1920 Pixel sind, befindet sich der Nian-Kuchen genau in der Mitte der Ansicht und der Seiteneffekt ist wie unten gezeigt

width:1920px

Wenn die Breite des Ansichtsfensters 1210 px beträgt, wird der Nian-Kuchen immer noch in der Mitte der Ansicht angezeigt, wie in der Abbildung unten gezeigt

width:1210px

Der Inhalt dieses Artikels ist hier. Ich habe den Quellcode an GitHubBanner gesendet. Bedürftige Schüler können ihn herunterladen von selbst

Ende der Datei

Es ist unvermeidlich, dass während des Prozesses Fehler oder Ungenauigkeiten auftreten. Ich hoffe, dass mich jeder korrigieren kann, um nicht noch mehr Menschen in die Irre zu führen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

CSS-Box-Modell-Beispiel

So verwenden Sie negative Randwerte in CSS, um das anzupassen Mittelposition

CSS, um den Effekt des Textumbruchs um Bilder zu erzielen

Das obige ist der detaillierte Inhalt vonÜber die Methode der reaktionsschnellen und zentrierten Anzeige von CSS-Bannerbildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!