Aus dem Kurs: Bootstrap 4: Ein erster Blick

Responsive Bilder

Aus dem Kurs: Bootstrap 4: Ein erster Blick

Gratismonat starten Für Ihr Team erwerben

Responsive Bilder

“

Ich verwende hier auf meiner Testseite einiges an Bildern, und all diesen Bildern ist gemeinsam, dass sie responsive reagieren können. Das heißt, sie können mit der Größe ihres Eltern-Elements mitwachsen beziehungsweise mitschrumpfen und sie können sich dann an die unterschiedlichen Gegebenheiten mit den unterschiedlichen Breakpoints auch tatsächlich anpassen. Dies erreiche ich, indem ich auf der einen Seite im CSS hier prinzipiell eine Einstellung treffe, die mir dann den responsiblen Umgang ermöglicht, das heißt, ich verwende für alle Image-Elemente eine maximale Weite von 100 Prozent und eine automatische Höhe. Das ist notwendig, damit nachher meine Bilder nicht gequetschstaucht werden, sondern ihre Proportionen einigermaßen behalten können. Und um auf der sicheren Seite zu sein, dass es in allen Browsern gleich gut funktioniert, können Sie nach einem Bild, das Sie betont responsibel erhalten wollen, wie zum Beispiel ich hier mein letztes Bild auf meiner letzten Seite noch eine eigene Klasse vergeben, die dann dafür sorgt, dass seitens Bootstrap dieses Bild auf jeden Fall flexibel behandelt wird und das heißt img-fluid. Mit diesem img-fluid sorgen Sie eben dafür, dass in allen Browsern gleichermaßen für dieses flexible Verhalten der Bilder gesorgt wird beziehungsweise wird dafür gesorgt, dass sie mit Ihren Eltern-Elementen mitwachsen beziehungsweise mitschrumpfen können. Ich habe jetzt hier eben dieses Bild gerade mit diesem Fluid versehen und wir können uns das jetzt nochmal im Detail anschauen. Mit jedem Breakpoint bekommt das eine andere Größe, behält aber seine Dimension bei. Ich kann Bilder auf diese Art und Weise nicht nur responsible machen, sondern es gibt auch ein paar Klassen, die das Erscheinungsbild der Bilder etwas optimiert. Ich kann also dafür sorgen, dass zum Beispiel von diesen Bildern hier eines ein ovales Aussehen bekommt, eines vielleicht so kleine Fotoecken wie bei Thumbnails und eines vielleicht abgerundete Ecken bekommt. Und für jedes einzelne dieser gerade von mir erwähnen Erscheinungsformen gibt es auch eine eigene Klasse, das heißt, ich muss nicht lange mich selbst quellen oder spielen mit den Einstellungen, sondern ich kann dann einem Bild einfach die entsprechende Klasse mitgeben. Hier sage ich jetzt zum Beispiel, mein Waldbild soll abgerundete Kanten bekommen, und die Klasse dafür ist img-rounded oder mein Blumenbild soll eben oval werden, das heißt, hier habe ich dann eine Klasse, namens img-circle. Und für mein Bergbild werde ich diesen kleinen Fotorahmen nehmen, und das erreiche ich mit der Klasse img-thumbnail. So, ich habe da jetzt drei Klassen vergeben, und wir können uns das Ergebnis gleich anschauen. Ich lade die Seite neu, und hier haben Sie die von mir gerade erwähnten abgerundeten Ecken, hier die Umsetzung von Circle und hier die Umsetzung eines Thumbnails und das, ohne großartig selbst nicht spielen zu müssen, sondern lediglich durch den Einsatz von Klassen.

Inhalt