Wie kann ich die Größe von Bildern in HTML ändern und gleichzeitig das Seitenverhältnis beibehalten?

Beibehalten des Seitenverhältnisses bei der Bildgrößenänderung

Bei der Arbeit mit Bildern ist es wichtig, deren Seitenverhältnisse beizubehalten, um sicherzustellen, dass sie korrekt angezeigt werden. Die Angabe von Breiten- und Höhenattributen in HTML führt jedoch oft zu Verzerrungen.

Beachten Sie den folgenden HTML-Code:

<img src="/static/imghwm/default1.png" data-src="big_image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="">

Um die Größe des Bildes unter Beibehaltung seines Seitenverhältnisses zu ändern, wenden Sie das folgende CSS an Regel:

img {
    display: block;
    max-width: 500px;
}

Die Anzeige: block; Die Eigenschaft stellt sicher, dass sich das Bild wie ein Blockelement verhält und die Breite seines Containers ausfüllt. Die max-width-Eigenschaft legt die maximale Breite für das Bild fest und stellt sicher, dass es diese Breite nicht überschreitet und gleichzeitig seine Höhe beibehält.

Dieses CSS gilt auch für den folgenden HTML-Code:

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/aEEkn.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Wie kann ich die Größe von Bildern in HTML ändern und gleichzeitig das Seitenverhältnis beibehalten?" >

Mit diesem Ansatz wird die Größe von Bildern unterschiedlicher Größe proportional geändert, wobei ihr Seitenverhältnis erhalten bleibt und gleichzeitig die angegebene maximale Breite eingehalten wird.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe von Bildern in HTML ändern und gleichzeitig das Seitenverhältnis beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!