CSS だけを使用して画像のサイズを比例的に変更できますか?

CSS で画像のサイズを比例的に変更する

画像のサイズのカスタマイズは Web 開発の一般的なタスクであり、CSS を使用してそれを行う方法を理解しています。は不可欠です。この記事では、画像を元のサイズの割合に変更する方法 (画像を半分から 50% に縮小するのと同様) を検討します。

「width: 50%;」を適用する画像に追加すると、そのサイズはそれ自体に関連して縮小されるのではなく、

などの親要素に関連して縮小されます。 CSS のみを使用して、画像のサイズを比例的に変更できますか?

方法 1: 視覚的な変換

この方法では、CSS 変換を使用して、画像の外観を変更せずに画像の外観を変更します。 DOM 内の実際の寸法。サイズ変更後、画像は中央に表示されます。

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

<code class="html"><img src="https://via.placeholder.com/300x200" /></code>

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