Bildgrößenänderung unter Beibehaltung des Seitenverhältnisses erzwingen

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

Erster Versuch:

Anfänglich wurden zur Größenänderung bestimmte Abmessungen und benutzerdefinierte CSS-Regeln verwendet das Bild, aber das Seitenverhältnis wurde nicht beibehalten:

img {
  max-width: 500px;
}

Lösung:

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

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

Ergebnis:

Anwenden dieser CSS-Regeln auf das Bild:

This image is originally 400x400 pixels, but should get resized by the CSS:

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

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