CSS を使用して画像のサイズを変更するときにアスペクト比を維持するにはどうすればよいですか?

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

画像のサイズ変更におけるアスペクト比の不一致は、CSS を変更することで修正できます。

HTML コードは元々、画像の幅と高さの両方の属性を指定しており、これらの属性はCSSルール。 CSS が優先されるようにするには、高さ属性を削除する必要があります。

さらに、CSS ルールの max-width プロパティは画像の幅を制限します。ただし、高さは明示的に設定されていません。アスペクト比を確実に維持するには、元のアスペクト比を尊重する形で高さも制限する必要があります。

提供されたスニペットでは、CSS プロパティの使用を提案しています。display: block、max-width: 230px、max -高さ: 95px、幅: 自動、高さ: 自動。これらの設定により、元のアスペクト比を維持しながら、最大幅と最大高さの制約内で画像を拡大できます。したがって、画像は歪みやトリミングなしでサイズ変更されます。

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