Wie lässt sich die Größe von Bildern mithilfe von CSS automatisch an die Browsergröße anpassen?

Größe von Bildern mithilfe der Browsergröße mithilfe von CSS automatisch ä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 finden.

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.

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* ie8 */
}</code>

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

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

Das obige ist der detaillierte Inhalt vonWie lässt sich die Größe von Bildern mithilfe von CSS automatisch an die Browsergröße anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!