アスペクト比を維持しながら CSS で画像のサイズを強制的に変更するにはどうすればよいですか?

画像の強制サイズ変更中にアスペクト比を維持する

Web 開発で画像を扱う場合、元のアスペクト比を維持することが重要です。ねじれ。デフォルトでは、幅や高さなどの CSS プロパティを使用して画像を拡大縮小すると、画像のアスペクト比が変わる可能性があります。

問題への対処

この問題に対処するには、CSS ルールを使用して次のことを行うことができます。アスペクト比を維持しながら強制的にサイズ変更します。次のコード スニペットは、この機能を実現します。

img {
  display: block;
  max-width: 500px;
  width: auto; 
  height: auto;
}

表示: ブロック;プロパティは、画像がブロック要素のように動作し、利用可能な全幅を占めるようにします。最大幅: 500ピクセル;画像の最大幅を設定し、500 ピクセルを超えないようにします。

重要なのは、width: auto;高さ: 自動;アスペクト比を維持しながら画像のサイズを自動的に調整できるようにします。これは、画像の高さが歪んだり、伸びたり潰れたりすることなく、指定された最大幅に合わせて画像のサイズが変更されることを意味します。

使用例

次のコードを考えてみましょう。

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/aEEkn.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="アスペクト比を維持しながら CSS で画像のサイズを強制的に変更するにはどうすればよいですか?" >

この画像に CSS ルールを適用すると、サイズを維持しながら、指定された最大幅内で強制的にサイズ変更されます。アスペクト比

以上がアスペクト比を維持しながら CSS で画像のサイズを強制的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。