Bootstrap - Object Fit: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, zukünftige Webentwickler! Heute tauchen wir in die wunderbare Welt von Bootstrap's object-fit-Eigenschaft ein. Als dein freundlicher Nachbarschafts-Computerlehrer freue ich mich darauf, dich Schritt für Schritt durch dieses Thema zu führen. Am Ende dieses Tutorials wirst du Objekte wie ein Profi anpassen können!

Was ist Object Fit?

Bevor wir uns den spezifischen Bootstrap-Details zuwenden, lassen Sie uns verstehen, was object-fit überhaupt bedeutet. Stell dir vor, du versuchst ein großes, rechteckiges Foto in einen kleinen, quadratischen Rahmen zu passen. Du hast einige Optionen:

1. Das Foto strecken (aber es könnte verzerrt aussehen)
2. Ein Teil des Fotos abschneiden
3. Das Foto verkleinern und umliegendes Leerraum lassen

Object-fit ist wie ein magischer Fotoraum, der all diese Dinge und mehr tun kann!

Bootstrap und Object Fit

Bootstrap, unser freundlicher Frontend-Framework, bietet uns Klassen, um object-fit-Eigenschaften einfach auf unsere Bilder und Videos anzuwenden. Lassen Sie uns diese Klassen erkunden und sie in Aktion sehen!

Die Grundlegenden Klassen

Bootstrap bietet fünf object-fit-Klassen:

Klasse	Beschreibung
.object-fit-contain	Passt das gesamte Objekt innerhalb des Containers, während das Seitenverhältnis beibehalten wird
.object-fit-cover	Bedeckt den gesamten Container, möglicherweise durch Abschneiden des Objekts
.object-fit-fill	Dehnt das Objekt, um den Container zu füllen, möglicherweise verzerrt
.object-fit-scale	Skaliert das Objekt so groß wie möglich, ohne zu schneiden oder zu dehnen
.object-fit-none	Ignoriert die Containergröße und verwendet die ursprüngliche Größe des Objekts

Lassen Sie uns das mit einigen Beispielen in Aktion sehen!

Beispiel 1: Object Fit Contain

<img src="wide-landscape.jpg" class="object-fit-contain border rounded" alt="Landschaft">

In diesem Beispiel verwenden wir .object-fit-contain auf einem breiten Landschaftsbild. Das Bild wird vollständig in seinen Container passen und sein Seitenverhältnis beibehalten. Wenn der Container höher als das Bild ist, siehst du oben und unten Leerraum.

Beispiel 2: Object Fit Cover

<img src="tall-portrait.jpg" class="object-fit-cover border rounded" style="width: 200px; height: 200px;" alt="Porträt">

Hier verwenden wir .object-fit-cover auf einem hohen Porträtfoto, das in einen quadratischen Container gezwungen wird. Das Bild wird den gesamten Container füllen, aber Teile davon könnten oben und unten abgeschnitten werden.

Beispiel 3: Object Fit Fill

<img src="square-logo.jpg" class="object-fit-fill border rounded" style="width: 300px; height: 150px;" alt="Logo">

Mit .object-fit-fill wird unser quadratisches Logo gestreckt, um in einen rechteckigen Container zu passen. Es könnte ein bisschen verzerrt aussehen, aber es wird den Raum vollständig füllen.

Responsives Object Fit

Nun sprechen wir über das responsive Gestalten unserer object-fit-Eigenschaften. Bootstrap ermöglicht es uns, verschiedene object-fit-Klassen an verschiedenen Bildschirmgrößen anzuwenden. Dies ist super praktisch für die Erstellung von Layouts, die sowohl auf Mobilgeräten als auch auf Desktops gut aussehen!

Responsive Klassen

Bootstrap bietet responsive Varianten der object-fit-Klassen:

Klasse	Beschreibung
.object-fit-sm-*	Wird ab dem kleinen Breakpoint angewendet
.object-fit-md-*	Wird ab dem mittleren Breakpoint angewendet
.object-fit-lg-*	Wird ab dem großen Breakpoint angewendet
.object-fit-xl-*	Wird ab dem extragroßen Breakpoint angewendet
.object-fit-xxl-*	Wird ab dem extra-extragroßen Breakpoint angewendet

Beispiel 4: Responsives Object Fit

<img src="versatile-image.jpg" class="object-fit-cover object-fit-sm-contain object-fit-md-fill border rounded" alt="Vielseitiges Bild">

In diesem Beispiel wird unser Bild:

• Mit cover auf extra kleinen Bildschirmen (Handys) angezeigt
• Schaltet auf contain bei kleinen Bildschirmen (Tablets) um
• Verwendet fill auf mittleren und größeren Bildschirmen (Desktops)

Dies ermöglicht es uns, die Anzeige des Bildes basierend auf der Bildschirmgröße zu optimieren. quite cool, oder?

Object Fit mit Videos

Object-fit funktioniert nicht nur mit Bildern - es ist auch großartig für Videos! Lassen Sie uns sehen, wie wir es verwenden können, um unsere Videoinhalte fantastisch aussehen zu lassen.

Beispiel 5: Video mit Object Fit

<video class="object-fit-contain w-100" autoplay loop muted>
<source src="cool-video.mp4" type="video/mp4">
Dein Browser unterstützt das Video-Tag nicht.
</video>

In diesem Beispiel verwenden wir .object-fit-contain, um sicherzustellen, dass unser Video in seinen Container passt und sein Seitenverhältnis beibehält. Die w-100-Klasse lässt das Video 100% der Breite seines Containers einnehmen.

Beispiel 6: Responsives Video Object Fit

<video class="object-fit-cover object-fit-md-contain w-100" style="height: 300px;" autoplay loop muted>
<source src="awesome-video.mp4" type="video/mp4">
Dein Browser unterstützt das Video-Tag nicht.
</video>

Hier verwenden wir eine Kombination aus .object-fit-cover und .object-fit-md-contain. Auf kleineren Bildschirmen wird das Video den Container bedecken (möglicherweise einige Inhalte abschneiden), aber auf mittleren und größeren Bildschirmen schaltet es in den contain-Modus um, zeigt das vollständige Video ohne Zuschneiden.

Fazit

Und das war's, Leute! Wir haben die Ins und Outs der Bootstrap object-fit-Klassen erkundet. Vom grundlegenden Bildanpassen bis zu responsiven Videos, du hast nun die Werkzeuge, um deine Mediener内容的显示效果做到在任何设备上都很好。

Denke daran, Webentwicklung ist alles über das Ausprobieren. Habe keine Angst, diese Klassen zu mischen und zu kombinieren, um zu sehen, was am besten für dein Projekt funktioniert. Wer weiß? Vielleicht entdeckst du eine Kombination, die deine Website in der Stadt zum Gesprächsthema macht!

Als wir aufhören, erinnere ich mich an einen Schüler, der mir einmal sagte: "Object-fit ist wie das Anziehen deiner alten Jeans nach den Feiertagen - manchmal musst du contain, manchmal musst du cover, und manchmal musst du einfach nur fill!" Gut gesagt, junger Padawan, gut gesagt.

Weiters üben, weiter lernen und vor allem weiter Spaß an der Webentwicklung haben. Bis zum nächsten Mal, happy coding!

Credits: Image by storyset