Wie ist die Kompatibilität von Bootstrap -Image -Zentrieren

Bootstrap Image Centering sieht Kompatibilitätsprobleme vor. Die Lösung lautet wie folgt: Verwenden Sie MX-Auto, um das Bild horizontal für Anzeige: Block zu zentrieren. Vertikale Zentrierung Verwenden Sie Flexbox- oder Gitterlayouts, um sicherzustellen, dass das übergeordnete Element vertikal zentriert ist, um die untergeordneten Elemente auszurichten. Verwenden Sie für IE -Browserkompatibilität Tools wie autoprefixer, um die Präfixe von Browser automatisch hinzuzufügen. Optimieren Sie die Bildgröße, Format und Ladereihenfolge, um die Seitenleistung zu verbessern.

Bootstrap -Bildzentrierung: Kompatibilitätsprobleme und Eleganzlösungen

Bootstrap bietet bequeme Werkzeuge für die zentralen Bilder, aber in tatsächlichen Anwendungen gibt es viele Kompatibilitätsprobleme. Glauben Sie, dass das einfache Anwenden von text-center alles gut läuft? Zu naiv! Schauen wir uns in diesem Artikel die Kompatibilität von Bootstrap -Bildern an und teilen Sie einige der Erfahrungen, die ich im Laufe der Jahre zusammengefasst habe. Nachdem Sie es gelesen haben, können Sie schnelle, stabile und hochkompatible Code schreiben.

Warum ist es so schwierig, das Bild zu zentrieren? Die Grundursache des Problems liegt im Unterschied in der Parsen und Darstellung von CSS durch verschiedene Browser und Geräte. text-center ist nur für Text gültig, und der Effekt ist für Bilder oft nicht zufriedenstellend, insbesondere für solche mit inkonsistenter Breite und Höhe.

Grundkenntnisse: Layoutmechanismus von Bootstrap

Bootstrap verwendet ein Gittersystem, das das Layout von Elementen durch container , row , col und andere Klassen steuert. Das Verständnis dieser grundlegenden Konzepte ist der Schlüssel zur Lösung des Problems der Zentrierung von Bildern. Vergessen Sie nicht, dass die beiden alten Freunde display: block and display: inline-block auch eine wichtige Rolle bei der Zentrierung des Bildes spielen.

Kern: Lassen Sie das Bild in der Mitte sein

Die einfachste Lösung ist die Verwendung von mx-auto (Rand-Links: Auto; Rand-Rechts: Auto;). Diese Codezeile funktioniert normalerweise gut in Bootstrap, sodass das Bild horizontal zentriert werden kann. Es funktioniert jedoch nur für Bilder mit display: block . Sie müssen also sicherstellen, dass Ihr Bildstil display: block; Oder verwenden Sie das <img class="img-fluid mx-auto d-block lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="Wie ist die Kompatibilität von Bootstrap -Image -Zentrieren" > -Tag direkt, da standardmäßig die Anzeigeeigenschaft des <img class="img-fluid mx-auto d-block lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="Wie ist die Kompatibilität von Bootstrap -Image -Zentrieren" > -Tag inline ist.

 <code><div> <div> <div> <img class="img-fluid mx-auto d-block lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="Responsive image"> </div> </div> </div></code>

img-fluid d-block sich die Bildbreite an den mx-auto Container anpassen. Das Kombinieren dieser drei kann in den meisten Fällen ein perfektes Niveau erreichen.

Vertikales Zentrieren: Ein schwierigeres Problem

Es ist relativ einfach, horizontal zu zentrieren, aber es erfordert mehr Fähigkeiten, um vertikal zu zentrieren. Der einfache und grobe Weg ist die Verwendung von Flexbox- oder Rasterlayout.

 <code class="html"><div class="container"> <div class="row justify-content-center"> <div class="col-md-6 d-flex align-items-center"> <img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="your-image.jpg" alt="Responsive image"> </div> </div> </div></code>

Verwenden Sie hier d-flex und align-items-center , um den übergeordneten Container auf das Flex-Layout einzustellen und die untergeordneten Elemente vertikal zu zentrieren (Bild). Dies ist eine elegante und effiziente Lösung mit guter Kompatibilität.

Dh alte antike Kompatibilität

Wenn Sie leider Unterstützung für IE -Browser benötigen (beten Sie nicht), benötigen Sie einen zusätzlichen CSS -Hack, um die Kompatibilität zu gewährleisten. Dieser Teil des Inhalts ist ziemlich kompliziert und ich empfehle, ein Tool wie Autoprefixer zu verwenden, um die Präfixe von Browser automatisch hinzuzufügen.

Leistungsoptimierung

Die Größe des Bildes wirkt sich direkt auf die Ladegeschwindigkeit der Seite aus. Das Komprimieren von Bildern und die Verwendung des richtigen Bildformats (WebP ist eine gute Wahl) kann die Leistung erheblich verbessern. Vergessen Sie nicht lazy-loading zu verwenden, um die Bildladenreihenfolge für die Bildung zu optimieren.

Zusammenfassen

Die Zentrierung des Bootstrap -Bildes scheint einfach zu sein, hat aber in tatsächlichen Anwendungen das Geheimnis versteckt. Nur wenn Sie das richtige Layout auswählen und auf die Browserkompatibilität achten können, können Sie hochwertige und leistungsstarke Code schreiben. Denken Sie daran, Code kann nicht nur ausführen, sondern auch elegant, effizient und leicht zu warten. Nur durch Üben und Zusammenfassen von mehr können Sie ein echter Programmiermeister werden.

Das obige ist der detaillierte Inhalt vonWie ist die Kompatibilität von Bootstrap -Image -Zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!