Wie kann ich die Größe von Bildern nur mit CSS anpassen?

So ändern Sie die Größe von Bildern mithilfe von CSS dynamisch, wenn sich das Browserfenster ändert

Um die Reaktionsfähigkeit einer Website zu verbessern, müssen Sie häufig die Bildgrößen basierend auf den Abmessungen des Browsers anpassen . In diesem Artikel wird erläutert, wie Sie diese Funktionalität ausschließlich mit CSS erreichen.

Dynamische Größenänderung von Bildern implementieren

Damit sich Bilder an die Breite und Höhe des Browsers anpassen können, fügen Sie das folgende CSS hinzu Eigenschaften zum Element:

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

In Internet Explorer 8 ist eine zusätzliche Eigenschaft erforderlich:

width: auto;

Sicherung der maximalen Breitenbeschränkungen

Um die zu begrenzen Maximale Breite eines Bildes, wickeln Sie es in einen Container mit einem angegebenen Wert ein max-width:

<div>
<p><strong>Wichtige Punkte</strong></p>
<ul>
<li>Mit dieser Lösung können Bilder nahtlos skaliert werden, wenn sich die Abmessungen des Browserfensters ändern.</li>
<li> Es funktioniert in allen getesteten Browsern: Chrome, Firefox und IE.</li>
<li>Dafür ist kein JavaScript erforderlich Umsetzung.</li>
</ul>
</div>

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe von Bildern nur mit CSS anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!