CSS で画像自体の割合を変更する
質問:
どうすればできますか元の画像のサイズが不明なシナリオで、JavaScript やサーバー側のソリューションに頼らずに、CSS を使用して画像のサイズをパーセンテージで縮小しますか?
答え:
方法 1 (視覚的なサイズ変更):
この方法では、DOM 内の元のサイズを維持しながら、画像のみを視覚的に拡大縮小します。ただし、サイズ変更された画像は元のコンテナ内の中央に配置されます。
<code class="css">img { transform: scale(0.5); }</code>
HTML:
<code class="html"><img src="https://via.placeholder.com/300x200" /></code>
方法 2 (パーセンテージベースの背景サイズ) :
または、画像を含む DIV 要素にパーセンテージベースの背景サイズを適用することもできます。
<code class="css">.image-container { width: 100%; height: 100%; background-image: url("image.png"); background-size: 50% 50%; background-repeat: no-repeat; }</code>
HTML:
<code class="html"><div class="image-container"></div></code>
注:
方法 1 では 1 つの画像に対して目的のサイズ変更結果が得られますが、方法 2 を使用すると、コンテナ内で複数の画像を一貫してサイズ変更できます。
以上がJavaScript を使わずに CSS を使用して画像のサイズをパーセンテージで変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。