Foto: Hans / Pixabay.com (CC0)
Drei zentrale Merkmale machen eine „responsive“ Website aus: Ein flexibles bzw. flüssiges Gestaltungsraster (Grid), Media Queries und flexible Bilder/Medien. Dieser Artikel geht kurz auf die Flexibilität von Bildern und Medien ein. Auf zahlreichen Websites werden solche und ähnliche Techniken bereits eingesetzt.
Basiert eine Website auf einem flexiblen Gridsystem, passt sie sich entsprechend an die Fenstergröße an. Doch auf der Seite eingebundene Bilder werden standardmäßig in ihrer vollen Größe angezeigt. Wird ein flexibel angelegter DIV-Container beispielsweise durch die Anzeige in einem mobilen Browser auf eine Breite reduziert, die geringer ist als die Größe des Bildes, so ragt das Bild über den Container hinaus. Dies ist in aller Regel ein unerwünschter Effekt, der zu einem Verschieben des kompletten Layouts führen kann. Abhilfe verschafft das in CSS 2 eingeführte max-width Attribut:
Durch diese simple Zeile werden alle Bilder eines HTML-Dokumentes auf die maximale Größe von hundert Prozent des jeweils übergeordneten Elementes skaliert. Das max-width Attribut greift auch bei HTML5-Videos und extern eingebundenen Objekten (vgl. Marcotte 2011; W3C 2011a):
Seit CSS 3 können auch Hintergrundbilder mittels des Attributes background-size entsprechend skaliert werden (vgl. W3C 2014a). Für Medienobjekte, die nicht via CSS angepasst werden können, stehen diverse JavaScript Lösungen zur Verfügung. So sorgt beispielsweise fitvidsjs.com für die Anpassung von externen Videos (vgl. FitVidsJS.com 2014).
