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

Bildgrößenänderung erzwingen und gleichzeitig das Seitenverhältnis beibehalten

Bei der Arbeit mit Bildern ist es oft notwendig, die Bildgröße auf bestimmte Abmessungen zu ändern. Durch die Beibehaltung des Seitenverhältnisses wird jedoch sichergestellt, dass Bilder nicht verzerrt oder gestreckt erscheinen.

Erster Versuch:

Anfangs wurden zur Größenänderung angegebene Abmessungen und benutzerdefinierte CSS-Regeln verwendet das Bild, aber das Seitenverhältnis war nicht gepflegt:

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

img {
  max-width: 500px;
}

Lösung:

Um die Größenänderung von Bildern unter Beibehaltung des Seitenverhältnisses zu erzwingen, können die folgenden CSS-Eigenschaften verwendet werden:

• display: block;: Stellt sicher, dass das Bild innerhalb der Seite fließen kann Inhalt.
• max-width:230px;: Legt die maximale Breite des Bildes fest.
• max-height:95px;: Legt die maximale Höhe des Bildes fest.
• width: auto;: Ermöglicht dem Bild, den verfügbaren Platz innerhalb der maximalen Breite und maximalen Höhe automatisch auszufüllen Einschränkungen.
• height: auto;: Passt die Höhe automatisch basierend auf dem inhärenten Seitenverhältnis des Bildes an.

Ergebnis:

Diese werden angewendet CSS-Regeln für das Bild:

<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 mithilfe von CSS die Größe von Bildern ändern und gleichzeitig das Seitenverhältnis beibehalten?" >

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

Ergibt ein Bild, das ist Die Größe wird innerhalb der angegebenen maximalen Abmessungen geändert, während das ursprüngliche Seitenverhältnis beibehalten wird.

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