Responsive Images – width/height-Attribute entfernen, lazy loading & padding-bottom Trick

Für das Einbinden von Bildern im Responsive Webdesign wird häufig empfohlen die ‚width‘- und ‚height‘-Attribute im HTML-Quellcode zu entfernen. Das ist aber nicht nötig und meiner Meinung nach auch nicht gut in Hinblick auf hochauflösende Bilder.

Mit CSS kann man die im HTML festgelegten Breiten überschreiben und die Bilder so flexibel machen.

Responsive Images basics:

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

Das Bild passt sich somit immer dem Container an, wird aber nie größer als seine eigentliche Originalgröße in Pixel. Das dürfe sicherlich bekannt sein. Wenn das nicht funktioniert, liegt ein anderer „Fehler“ vor, wie ein anderer BFC durch ‚float‘ oder ähnliches.

Responsive Images – width/height-Attribute entfernen, lazy loading & padding-bottom Trick weiterlesen