CSS で 100% の幅または高さを使用するときに、アスペクト比を維持しながら画像が特定のサイズを超えないようにするにはどうすればよいですか?

CSS で 100% の幅または高さのアスペクト比制約を設定する

CSS で画像に 100% の幅または高さを割り当てるとアスペクト比は維持されますが、結果が生じる可能性があります。画像が目的の位置に対して大きすぎるか小さすぎます。

考えられる解決策の 1 つは、画像を DIV 内に配置し、overflow:hidden を適用して余分な部分をトリミングすることです。ただし、これは画像のサイズを制限するだけであり、そのアスペクト比には影響しません。

アスペクト比を維持する必要がない場合は、画像に max-width プロパティと max-height プロパティを設定することで、アスペクト比を維持することができます。アスペクト比を維持しながら、特定のサイズを超えることはありません。これらの最大サイズを設定すると、指定された境界内に収まるように画像のサイズが変更されます。

例:

<code class="css">img {
  max-width: 200px;
  max-height: 150px;
}</code>

このアプローチでは、画像の幅が 200 ピクセルを超えることはありません。アスペクト比を維持しながら、高さは 150 ピクセルになります。

以上がCSS で 100% の幅または高さを使用するときに、アスペクト比を維持しながら画像が特定のサイズを超えないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。