Wie kann ich das Seitenverhältnis beibehalten, wenn ich die Größe von Bildern mit CSS ändere?

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

Die Korrektur der Abweichung im Seitenverhältnis bei der Bildgrößenänderung kann durch CSS-Änderungen erreicht werden.

Der HTML-Code gibt ursprünglich sowohl Breiten- als auch Höhenattribute für das Bild an, die die CSS-Regel außer Kraft setzen. Damit das CSS Vorrang hat, sollte das Höhenattribut entfernt werden.

Zusätzlich begrenzt die Eigenschaft „max-width“ in der CSS-Regel die Breite des Bildes. Die Höhe wird jedoch nicht explizit festgelegt. Um sicherzustellen, dass das Seitenverhältnis beibehalten wird, sollte auch die Höhe begrenzt werden, jedoch auf eine Weise, die das ursprüngliche Seitenverhältnis respektiert.

Das bereitgestellte Snippet schlägt die Verwendung von CSS-Eigenschaften display: block, max-width: 230px, max. vor -height: 95px, width: auto und height: auto. Mit diesen Einstellungen kann das Bild innerhalb der maximalen Breite und maximalen Höhe erweitert werden, während das ursprüngliche Seitenverhältnis erhalten bleibt. Daher wird die Größe des Bildes ohne Verzerrung oder Beschneiden geändert.

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