CSS のみを使用して画像自体のパーセンテージに合わせてサイズを変更する

Web デザインの領域では、画像を特定のサイズにサイズ変更する必要があります。が頻繁に発生します。 1 つのシナリオでは、コンテナ要素のサイズを変更せずに、イメージのサイズを元のサイズのパーセンテージまで縮小します。 JavaScript またはサーバーサイド スクリプトが解決策を提供しますが、この記事では CSS のみの潜在的な代替案を検討します。

CSS パーセンテージを使用して画像のサイズを変更することは可能ですか?

現時点では、独自のサイズに基づいて画像のサイズを変更できる直接の CSS プロパティはありません。ただし、この効果を実現できる 2 つの独創的な方法があります。

方法 1: 変換による視覚的なサイズ変更

この方法は、画像に影響を与えることなく、画像のサイズを視覚的に縮小します。実際の寸法。この手法では、「transform:scale()」プロパティを使用して、指定されたパーセンテージで画像を縮小します。画像は元のサイズの中央に残ります。

例:

img {
  transform: scale(0.5);
}