So zentrieren Sie Bilder unter verschiedenen Bildschirmgrößen

Um das Bild unter verschiedenen Bildschirmgrößen in Bootstrap zu zentrieren, können Sie eine Vielzahl von Methoden verwenden: Verwenden Sie FlexBox:

Verwenden Sie Margin: 0 Auto;

Mit Bootstrap ermöglicht es Bildern, sich unter verschiedenen Bildschirmgrößen zu konzentrieren: nicht nur text-center

Viele Neulinge verwenden text-center -Klasse von Bootstrap direkt, um das Bild zu zentrieren. Diese Methode ist jedoch nur dann effektiv, wenn die Bildbreite kleiner als die Containerbreite ist. Wenn die Bildbreite den Container überschreitet, schlägt sie fehl. In diesem Artikel wird in die Lösung dieses Problems anmutig eingehen, damit Sie nicht verrückt nach reaktionsschnellen Bildlayouts sind. Nach dem Lesen beherrschen Sie eine Vielzahl von Methoden und können die am besten geeignete Lösung entsprechend der tatsächlichen Situation auswählen und sogar den dahinter stehenden Mechanismus verstehen, wodurch Ihre Reaktionslayout -Fähigkeiten verbessert werden.

Beginnen wir mit den Grundlagen, das Grid -System von Bootstrap ist der Schlüssel. Es verwendet container , row , col und andere Klassen, um reaktionsschnelle Layouts zu erstellen. Das Verständnis der Rolle dieser Klassen ist die Grundlage für die Lösung von Problemen. col Klasse steuert die Breite der Säule, während die reaktionsschnellen Eigenschaften durch die Suffixe wie col-sm- , col-md- , col-lg- usw. implementiert werden, und die Breite der Säule wird gemäß der Bildschirmgröße eingestellt. Dies ist wie der Rahmen einer Architektur, die Bildmitte ist nur die Dekoration darin.

Wie zentriert man das Bild im Rahmen? Der direkteste Weg ist die Verwendung von Flexbox. Bootstrap 4 und oben unterstützen die Flexbox standardmäßig, was die Zentrierung von Bildern extrem einfach macht:

 <code class="html"><div class="d-flex justify-content-center"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Responsive image"> </div></code>

d-flex stellt den Container als Flex justify-content-center den Inhalt horizontal. Dies ist eine einfache und effiziente Methode, die für eine Vielzahl von Situationen funktioniert. Beachten Sie jedoch, dass die Höhe des Bildes selbst das Gesamtlayout beeinflusst. Sie müssen die Höhe des Containers entsprechend der tatsächlichen Situation einstellen oder andere Style -Steuerelemente verwenden.

Wenn Ihr Projekt auf Bootstrap 3 basiert oder Sie es vorziehen, andere Methoden zu verwenden, sollten Sie margin: 0 auto; Dies ist eine klassische horizontale Zentriermethode, bei der das Bild innerhalb eines Elements auf Blockebene platziert werden muss:

 <code class="html"><div style="text-align: center;"> <img src="/static/imghw/default1.png" data-src="your-image.jpg" class="lazy" alt="Responsive image"   style="max-width:90%"> </div></code>

Hier display: block; Stellen Sie das Bild auf ein Element auf Blockebene, margin: 0 auto; Dann wird horizontales Zentrieren erreicht. Diese Methode ist traditioneller, aber gleichermaßen effektiv. Es ist zu beachten, dass dies auf horizontale Zentrierung beschränkt ist, während die vertikale Zentrierung zusätzliche Verarbeitung erfordert, z. B. die Verwendung von Flexbox oder Gitter.

Natürlich gibt es kompliziertere Situationen. Zum Beispiel müssen Sie etwas um das Bild hinzufügen, oder das Bild muss als Reaktion auf verschiedene Bildschirmgrößen skaliert werden. Zu diesem Zeitpunkt müssen Sie möglicherweise das Netzsystem mit Flexbox oder Gitter kombinieren, um eine stärkere Kontrolle zu erzielen. Dies erfordert, dass Sie ein tieferes Verständnis des Layoutmechanismus von Bootstrap haben.

Schließlich über die Leistungsoptimierung. Während diese Methoden selbst keine offensichtlichen Leistungsprobleme verursachen, können zu viel Verschachtelung und unnötiges Styling die Ladegeschwindigkeit der Seite beeinflussen. Nur wenn der Code präzise und effizient bleibt und die richtige Lösung entsprechend den tatsächlichen Bedürfnissen auswählt, können Sie qualitativ hochwertige Reaktionscode schreiben. Denken Sie daran, dass es die beste Verfahren ist, die einfachste und effektivste Methode zu wählen und eine Überbearbeitung zu vermeiden. Verwenden Sie keine komplexen Lösungen, um Ihre Fähigkeiten zu zeigen. Einfachheit und Direktheit sind der König.

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Bilder unter verschiedenen Bildschirmgrößen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!