Bilder und Videos Responsive

Ein Problem bei responsiven Webseiten sind Elemente wie Bilder und Videos. Diese haben eine feste Größe. Idealerweise werden diese in Originalauflösung dargestellt.

Bei mobilen Geräten reicht dieser Platz oft nicht aus:

Dies sieht unschön aus und Google meckert darüber auch. Daher wäre die optimale Lösung, dass das Bild in der Originalgröße dargestellt wird, wenn genügend Platz zur Verfügung steht. Ist dies nicht der Fall, soll das Bild entsprechend verkleinert dargestellt werden.

Inhaltsverzeichnis

Bilder

Für Bilder lässt sich dies mit folgendem CSS-Code realisieren:

img { 
	max-width: 100%; 
	display:block; 
	height: auto; 
}

Videos

Auch für Videos lässt sich das responsiv realisieren:

video { 
  width: 100%    !important;
  height: auto   !important;
}

Das Ergebnis

Das Ergebnis sieht dann so aus:

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert