Verschiedene Responsive-Images-Variationen mit CSS
Kommentare

Das Internet wird heutzutage von einer immer vielfältigeren Anzahl an Devices unterschiedlicher Größe aus genutzt. Gerade Mobile Devices ermöglichen den Zugriff auf das Netz, egal, wo man sich gerade befindet.

Für die Gestaltung von Websites heißt das, dass sie auf allen möglichen Devices mit verschiedenen Displaygrößen und -Auflösungen funktionieren müssen – und genau hier kommt es immer wieder zu Problemen, gerade, was die Implementierung von Bildern in Responsive Webdesign angeht. Sarah Parker hat zusammengefasst, wie sich mit CSS verschiedene Varianten von Responsive Images erstellen lassen.

Responsive Images für ein- und mehrspaltige Layouts

Dass Websites Responsive sein sollen, ist keine neue Aussage. Tatsächlich sind aber längst nicht alle Seiten, die als „responsiv“ bezeichnet werden, auch tatsächlich Responsive. Vor allem bei Bildern kommt es dabei immer wieder zu Problemen, obwohl sie sich genauso wie jede andere Content-Form an hochauflösende Displays und das Layout von Responsive Websites anpassen müssen.

Mit CSS lässt sich dieses Problem jedoch leicht beheben, indem Bilder mithilfe ihrer Höhen- und Breiten-Properties Responsive gestaltet werden – und zwar sowohl für einspaltige Websites, als auch Seiten mit mehreren Spalten und Responsive Images mit voller Breite.

Doch von vorn. Zunächst muss einem Bild mit CSS die Breite in Prozent (normalerweise 100%) vorgegeben und die Höhe auf auto gesetzt werden, um das Element Responsive zu machen. Es wird dann anschließend einfach mit einem

-Container in das HTML-Markup eingebunden.

Auch für Layouts mit mehreren Spalten können Bilder so Responsive gestaltet werden, indem einfach die Breite des Element reduziert wird – beispielsweise um die Hälfte für ein zweispaltiges Layout oder auf ein Drittel bei drei Spalten. Mit Media-Queries können zudem Breakpoints definiert werden, um das Layout je nach Displaygröße anzupassen.

Responsive Images lassen sich auch so anzeigen, dass sie immer die volle Breite des Viewports einnehmen, indem das max-width-Property des Containers auf 100% gesetzt wird.

Es zeigt sich also, dass das Erstellen von Responsive Images nicht schwer sein muss und sich Bilder mit CSS leicht an unterschiedliche Devicegrößen und Displayauflösungen anpassen lassen. Einige Code-Beispiele, wie das für Layouts mit ein, zwei oder mehr Spalten aussehen kann, gibt es in Sarah Parkers Artikel zum Thema, der sowohl für Einsteiger, als auch Könner die Basis von Responsive Images zusammenfasst.

Aufmacherbild: Responsive Design Internet Communication Technology Concept von Shutterstock / Urheberrecht: Rawpixel

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -