Ändern der Größe eines Bildes auf einen bestimmten Prozentsatz ausschließlich mit CSS

Im Bereich des Webdesigns die Notwendigkeit, die Größe von Bildern auf bestimmte Abmessungen zu ändern kommt häufig vor. Ein Szenario besteht darin, die Größe eines Bildes auf einen Prozentsatz seiner Originalgröße zu reduzieren, ohne die Größe seines Containerelements zu ändern. Während JavaScript oder serverseitiges Scripting Lösungen bieten, untersucht dieser Artikel potenzielle reine CSS-Alternativen.

Ist es möglich, die Größe eines Bildes mithilfe von CSS-Prozentsätzen zu ändern?

Derzeit gibt es keine direkte CSS-Eigenschaft, die es ermöglicht, die Größe eines Bildes basierend auf seiner eigenen Größe zu ändern. Allerdings gibt es zwei geniale Methoden, die diesen Effekt erzielen können:

Methode 1: Visuelle Größenänderung mit Transformation

Diese Methode reduziert die Größe eines Bildes visuell, ohne es zu beeinflussen tatsächliche Abmessungen. Die Technik verwendet die Eigenschaft „transform:scale()“, um das Bild um einen angegebenen Prozentsatz zu verkleinern. Das Bild bleibt innerhalb seiner ursprünglichen Abmessungen zentriert.

Beispiel:

img {
  transform: scale(0.5);
}