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.
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:
2 Kommentare