JavaScript を使わずに CSS を使用して画像のサイズをパーセンテージで変更する方法

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 サイトの他の関連記事を参照してください。