Bilder in einem Responsive-Grid darzustellen, sodass sie in Höhe und Breite entsprechend der zur Verfügung stehenden Auflösung skalieren, ist einfach. Schwieriger wird das bei Elementen, die keine feste Höhe und Breite haben. Das könnten iframes zur Video-Einbettung, GoogleMaps-Ausschnitte oder Animationen per HTML5-Canvas sein.

Hierzu bedient man sich eines Verhältnisses, also Breite zu Höhe des Darstellungsformates. Die Höhe bei 16:9 beispielsweise ist 56,25% der Breite. Man baut sich per CSS zunächst einen Wrapper:

.flexmedia { position: relative; height: 0; padding-bottom: 56.25%; }

In diesen Wrapper wird das flexible Element platziert, in diesem Fall die Google-Maps-Canvas, das entsprechend der Auflösung skalieren soll:

.flexmedia #mapcanvas { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

Das HTML dazu sieht folgerndermassen aus:

<div class="flexmedia"> <div id="mapcanvas"> </div> </div>

Und fertig ist das flexible, im Verhältnis 16:9 skalierende Element.