Größe von Bildern automatisch anhand der Browsergröße mithilfe von CSS ändern

Sie möchten, dass sich die Größe Ihrer Bilder automatisch ändert, wenn Sie die Größe Ihres Browserfensters ändern, aber der bereitgestellte Code funktioniert nicht. Lassen Sie uns eine Lösung untersuchen.

Um die Bilder flexibel zu gestalten, müssen Sie ihnen max-width: 100 % und height: auto hinzufügen. Allerdings gibt es im IE8 einen Fehler, der dazu führt, dass dies nicht funktioniert. Um das Problem zu beheben, fügen Sie width: auto\\9 für IE8 hinzu.

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Alle mit dem img-Tag hinzugefügten Bilder werden jetzt automatisch in der Größe angepasst.

Zur Veranschaulichung hier ein JSFiddle-Beispiel, für das kein JavaScript erforderlich ist. Es ist mit den neuesten Versionen von Chrome, Firefox und IE kompatibel (basierend auf Tests).