Wie kann ich das Bildseitenverhältnis bei der Größenänderung mit CSS beibehalten?

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

Das Bildseitenverhältnis ist entscheidend für die Beibehaltung der ursprünglichen Proportionen eines Bildes bei der Größenänderung. Dieses Problem wird deutlich, wenn Bilder über vordefinierte Breiten- und Höhenattribute verfügen und zusätzliche CSS-Regeln angewendet werden.

Beispielsweise sind im unten bereitgestellten Code die Höhe und Breite des Bildes „big_image.jpg“ explizit als 600 definiert bzw. 900 Pixel:

<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ößenänderung von Bildern unter Beibehaltung des Seitenverhältnisses zu erzwingen, können CSS-Regeln verwendet werden. In diesem Fall kann die folgende CSS-Regel verwendet werden:

img {
    max-width: 500px;
}

Diese CSS-Regel verkleinert das Bild jedoch möglicherweise nicht auf die richtige Größe. Um dies zu beheben, sollten zusätzliche CSS-Eigenschaften verwendet werden:

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

Mit diesen CSS-Eigenschaften wird die Größe des Bildes „big_image.jpg“ unter Beibehaltung seines Seitenverhältnisses geändert. Dies wird mit dem folgenden HTML- und CSS-Code veranschaulicht:

<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 das Bildseitenverhältnis bei der Größenänderung mit CSS beibehalten?" >

Das obige ist der detaillierte Inhalt vonWie kann ich das Bildseitenverhältnis bei der Größenänderung mit CSS beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!