Wie lässt sich die Größe von Bildern automatisch ändern, wenn Browserfenster in CSS geändert werden?

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

Frage: Ich möchte, dass meine Bilder ihre Größe automatisch anpassen, wenn ich die Größe meines Browsers ändere Fenster. Der folgende Code funktioniert jedoch nicht:

HTML:

<code class="html"><img src="img/icon_contact.png" alt="" />
<img src="img/icon_links.png" alt="" /></code>

CSS:

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

Antwort:Um die Größenänderung von Bildern mit der Größenänderung des Browsers zu ermöglichen, fügen Sie Ihrem CSS die folgenden Eigenschaften hinzu:

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

Dadurch wird sichergestellt, dass Bilder proportional skaliert werden und sich automatisch an den verfügbaren Platz anpassen, wenn die Größe des Browserfensters geändert wird .

Zusätzliche Erklärung:

Die Kombination aus max-width: 100 % und height: auto ermöglicht es Bildern, auf ihre maximale Breite zu expandieren, ohne dabei die Breite des übergeordneten Elements zu überschreiten Beibehaltung ihres Seitenverhältnisses. Der width: auto9-Hack zielt speziell auf IE8 ab, der ansonsten beim Rendern von Bildern die maximale Breite ignoriert.

Daher werden alle Bilder, die mit der Funktion hinzugefügt wurden, ignoriert. Das Tag ist „flexibel“ und passt seine Größe an Änderungen der Browsergröße an.

Beispiel:

Eine funktionierende Demonstration finden Sie im folgenden JSFiddle-Beispiel: [JSFiddle-Link]

Dieser Code erfordert kein JavaScript und ist mit den neuesten Versionen von Chrome, Firefox und IE kompatibel.

Das obige ist der detaillierte Inhalt vonWie lässt sich die Größe von Bildern automatisch ändern, wenn Browserfenster in CSS geändert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!