Responsive Webdesign – Grundlagen

Hierarchie bei Bildern beibehalten

Testen Sie unsere 1924 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
"max-width: 100%" ist eine schöne und rasch implementierte Möglichkeit, damit Bilder sich immer an ihre Umgebung anpassen. Problematisch nur, dass in manchen Fällen die ursprünglich beabsichtige Hierarchie verlorengeht. Aber auch dafür gibt’s Abhilfe.

Transkript

max-width: 100% ist eine schöne und rasch implementierte Möglichkeit, damit Bilder sich immer an ihre Umgebung anpassen. Problematisch nur, dass in manchen Fällen die ursprünglich beabsichtigte Hierarchie verloren geht. Ich habe hier einmal ein Beispiel erstellt. Da sehen Sie ganz oben ein großes großes Bild, was ganz wichtig sein soll. Und hier zwei kleinere Bilder, die weniger wichtig sind. Diese Hierarchie ist ganz klar zu erkennen, wenn wir so einen großen Viewport haben. Jetzt werden alle Bilder mit max-width: 100% bearbeitet. Und sehen Sie sich einmal an, was dann passiert bei kleinem Viewport. Jetzt ist auch noch Ok. Also, wir haben immer noch klar: das obere Bild ist das wichtigere. Und jetzt plötzlich haben wir einen Sprung. Und da die Bilder immer proportional skaliert werden, wird das ursprünglich 900 Pixel breite Bild wesentlich stärker skaliert, als die anderen und es ist plötzlich einfach wesentlicher kleiner. Und das passt natürlich nicht immer. Was kann man da machen? Dafür gibt es verschiedene Möglichkeiten, die wir uns jetzt hier einmal ansehen. Zuerst einmal das ursprüngliche Beispiel. Sie sehen, ich habe hier div-Bereiche, wo dann immer diese Platzhalter-Bilder drin sind in der entsprechenden Breite. Und der eigentliche Code, der auslöst, dass die Bilder immer sich anpassen an die Breiten, ist natürlich img, max-width: 100% und height: auto. Was gibt es jetzt für Möglichkeiten? Die erste Möglichkeit besteht darin, dass wir jetzt die Breite der kleinen Bilder nicht auf 100% setzen, sondern auf schmaler. Sehen wir uns das zuerst an und beschäftigen wir uns dann damit, wie man das realisiert. Sie sehen wieder das Beispiel. Und wenn ich das jetzt hier kleiner mache, werden die Bilder hier nicht auf 100% skaliert, sondern sie werden wesentlich kleiner. Und das ist natürlich eine gute Möglichkeit, weil jetzt ist hier noch eine Hierarchie erkennbar. Der obere Bereich bleibt einfach der große wichtige und die unteren sind geschrumpft. Wie realisiert man das jetzt praktisch? Also, diese globale Regel haben wir hier natürlich auch. Aber wir müssen sie überschreiben durch eine spezielle Regel für unsere kleinen Bilder hier. Und das findet hier statt. Also, mit .eins img und .zwei img spreche ich meine Bilder an. Sie sehen: die stehen hier in einem Element eins und hier in einem Element zwei. Und was mache ich mit denen? Ich setze jetzt die Maximalbreite nicht auf 100%, sondern auf 50% beispielsweise. Und mit float: left lasse ich die Bilder jetzt links anordnen, sodass ein bisschen Text dann daneben kommt. Und dann haben wir eben diese Darstellung hier und die Bilder sind kleiner. Und das ist natürlich besser, als das was wir eben hatten. Kann man natürlich dann noch fein justieren bei der Ausrichtung von Text zu Bild etc. Und da ich in diesem Ansatz hier diesen Mobile first habe, müsste ich diese Angabe natürlich dann für die Desktop-Variante wieder auf den Standard zurücksetzen, weil es da nicht passt. Das ist eine Möglichkeit, die sehr gut ist. Es gibt eine weitere Möglichkeit und die besteht darin, dass wir das große Bild nicht wirklich skalieren, sondern beschneiden. Schauen wir uns so auch mal kurz an wie so etwas funktioniert. Also, erstmal hier wieder die große Ansicht. Da ist sozusagen nichts verändert und jetzt hier bei der kleinen Ansicht, sehen Sie, dass das Bild hier wieder auf die ursprüngliche Größe gesetzt ist, aber hingegen geschnitten wird. Also, Sie sehen, es ist dann nicht gesamt zu sehen. Und das kann natürlich auch eine Möglichkeit sein mit dem Ganzen hier umzugehen. Sollte dann hier vielleicht den Breakpoint schon ein bisschen vorher setzten, dass das schon vorher auf das andere hier umschaltet. Muss natürlich dann immer schauen bei echten Anwendung, dass dieser Bereich hier insgesamt nicht zu groß ist. Aber es geht einfach hier darum das Prinzip zu zeigen. Sehen wir uns einmal an wie das jetzt hier funktioniert. Das ist eine weitere Lösung. Und da geht es jetzt darum, dass wir die kleinen Bildchen lassen. Also, die werden auf 100% belassen. Und das was wir... ...worum wir uns jetzt aber besonders kümmern ist das große Bild. Und da schauen wir uns mal kurz den HTML-Code an. Hier, das Bild steht in einem umfassenden div-Element mit class="kopf". Da ist das Bild drinnen und hier müssen wir Formatierungen vornehmen. Ich habe hier den kopf erstmal auf overflow: hidden gesetzt. Damit werden Elemente, wenn sie größer sind, einfach abgeschnitten. Und das ist der Fall, den wir oben gerade betrachtet haben, weil wir wollen ja nicht, dass das Bild dann irgendwie rausragt und einen horizontalen Scrollbalken macht, sondern es soll abgeschnitten werden. Und das macht dieses overflow: hidden. Außerdem muss ich natürlich eine Angabe machen für max-width und height, weil ich die ja global immer behandle. Und ich habe jetzt max-width auf die normale Größe des Bildes gesetzt. Sie können natürlich hier auch eine andere Größe nehmen. Und auch die Höhe auf die normale Höhe. Das heißt, dass das Bild jetzt hier auf kleinen Screens überhaupt nicht skaliert wird. Dann würde normalerweise natürlich der linke Rand zu sehen sein. Und das passt in vielen Fällen nicht. Und ich kann das ein bisschen justieren, indem ich margin angebe. Mit 0 -50 schiebe ich das Bild eben um die Hälfte nach links, sodass eben auch ein Teil der Mitte zu sehen ist. Sie sehen das jetzt hier nochmal, wenn ich das hier auf dem kleinen Bildschirm zeige. Dann sehen Sie, dass eben ein Teil des mittleren Bereiches auch zu sehen ist und nicht hier nur dieser linke Teil. Weil wenn man das ohne dieses margin machen würde, dann wäre das nur dieser linke Teil. Inwieweit das passt, dass muss man natürlich je nach Fall entscheiden. Und dann natürlich auch fein justieren, auch schauen, dass wirklich der entscheidende Ausschnitt des Bildes dann auch immer zu sehen ist. Aber die Hierarchie ist natürlich auf jeden Fall durch diese Angaben hier auch auf kleinem Bildschirm beibehalten. Es gibt also zwei Möglichkeiten, wie Sie sich darum kümmern können, dass die Hierarchie beibehalten wird. Die eine Möglichkeit ist anzusetzen bei den Bildern, die ursprünglich als kleiner und unwichtiger konzipiert sind. Und die nicht auf eine Maximalbreite von 100%, sondern auf weniger zu setzen. Und die andere Möglichkeit besteht darin, bei dem großen und wichtigen Bild anzusetzen und das dieses mal nicht zu skalieren, sondern eben zu beschneiden.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
ISBN-Nummer:978-3-99032-060-0
Erscheinungsdatum:10.09.2013
Aktualisiert am:26.09.2016
Laufzeit:5 Std. 47 min (59 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!