CSS のみを使用して画像のサイズをそのサイズのパーセントに変更できますか?

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

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

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

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

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

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

例:

<code class="css">img {
  transform: scale(0.5);
}</code>

以上がCSS のみを使用して画像のサイズをそのサイズのパーセントに変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。