Wie man mit inkonsistenter Bildgröße in Bootstrap umgeht

Wie kann man die Bootstrap -Bilder verschiedener Größen elegant zentrieren? Verwenden von Flexbox-Layout: Verwandeln Sie den Container in einen Flexbox-Behälter und verwenden Sie die in den meisten Fällen geeignete Bild-In-Center, um das Bild horizontal auszurichten. Verwenden Sie das Objekt-Fit-Attribut: Fügen Sie dem Bild einen übergeordneten Container hinzu und setzen Sie die Breite und Höhe.

Bootstrap -Bild zentriert: verschiedene Größen, anmutig antworten

Bootstrap bietet bequeme Werkzeuge für die zentralen Bilder. Wenn die Größen der Bilder ungleichmäßig sind, erscheinen einfacher text-center oder mx-auto überwältigend. In diesem Artikel wird in die ordnungsgemäße Behandlung dieses Problems eingehen, sodass Ihre Bilder in verschiedenen Größen perfekt zentriert werden und gemeinsame Layout -Fallen vermeiden können. Nach dem Lesen werden Sie eine Vielzahl von Techniken beherrschen, um robuster und leichter zu verwalten.

Lassen Sie uns zunächst den grundlegenden Layout -Mechanismus von Bootstrap überprüfen. Es basiert auf einem Netzsystem, um Elemente durch Behälter, Zeilen und Spalten zu organisieren. text-center ist nur für Inline-Elemente gültig, und Bilder sind Elemente auf Blockebene, sodass das Bild nicht horizontal zentrieren kann. mx-auto verlässt sich auf die Breite des Elements, um horizontales Zentrieren zu erreichen. Daher wirkt sich bei Bildern unterschiedlicher Größe häufig eine schlechte Wirkung an.

Der Schlüssel besteht darin, die inhärenten Eigenschaften des Bildes zu verstehen: Es hat sowohl seine inhärenten Dimensionen als auch die Einschränkungen des übergeordneten Containers. Wir müssen diese beiden Aspekte kontrollieren, um einen perfekten Zentrierungseffekt zu erzielen.

Der direkteste Weg ist die Verwendung von Flexbox -Layout. Flexbox bietet leistungsstarke Ausrichtungsfunktionen, um einfach Bilder verschiedener Größen zu bewältigen.

 <code class="html"><div class="d-flex justify-content-center"> <img src="/static/imghw/default1.png" data-src="image1.jpg" class="lazy" alt="Image 1"> <img src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="Image 2"> </div></code>

d-flex verwandelt den Behälter in einen Flexbox-Behälter justify-content-center alle Kinder in horizontaler Richtung. Dies ist eine einfache und effektive Lösung, die in den meisten Fällen funktioniert. Beachten Sie, dass die Größe des Bildes selbst nicht geändert wird, der Container jedoch entsprechend der Bildgröße eingestellt wird.

Wenn wir jedoch die maximale Größe des Bildes einschränken müssen oder wenn wir möchten, dass das Bild den Anteil beibehält, scheint die Flexbox unflexibel genug zu sein. Zu diesem Zeitpunkt können wir in Betracht ziehen, object-fit -Eigenschaft zu verwenden.

 <code class="html"><div class="d-flex justify-content-center"> <div style="width: 200px; height: 200px;"> <img src="/static/imghw/default1.png" data-src="image1.jpg" class="lazy" alt="Image 1"   style="max-width:90%"> </div> <div style="width: 100px; height: 150px;"> <img src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="Image 2"   style="max-width:90%"> </div> </div></code>

Hier fügen wir dem Bild einen übergeordneten Container hinzu und setzen eine feste Breite und Höhe. object-fit: cover; skaliert das Bild, um den gesamten Container zu füllen, und kann einige Bildinhalte aufnehmen. object-fit: contain; Zeigt das Bild vollständig im Behälter an und hinterlässt leere Bereiche. Welches zu wählene Attribut hängt von Ihren spezifischen Anforderungen ab.

Es ist zu beachten, dass object-fit ein CSS-Attribut ist, kein Merkmal von Bootstrap. Aber es funktioniert gut mit dem Layoutmechanismus von Bootstrap.

In Bezug auf die Leistungsoptimierung wird schließlich empfohlen, geeignete Bildformate (z. B. WebP) und Größen zu verwenden und faule Ladetechniken zu verwenden, um die Ladegeschwindigkeit der Seite zu verbessern. Vermeiden Sie es, zu große Bilder zu verwenden, die die Benutzererfahrung ernsthaft beeinflussen können.

Kurz gesagt, um das Problem der Zentrierung von Bildern unterschiedlicher Größen in Bootstrap zu bewältigen, müssen Sie die entsprechende Lösung entsprechend der spezifischen Situation auswählen. Flexbox bietet die einfachste Lösung, während object-fit eine feinere Kontrolle bietet. Denken Sie daran, dass die Codestruktur und eine angemessene Kontrolle der Bildgröße der Schlüssel zur Lösung des Problems sind. Nur wenn Sie die Lösung auswählen, die Ihren Projektanforderungen am besten entspricht, und auf die Leistungsoptimierung zu achten, können Sie die beste Benutzererfahrung schaffen.

Das obige ist der detaillierte Inhalt vonWie man mit inkonsistenter Bildgröße in Bootstrap umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!