アスペクト比を維持しながら画像を Div 内に収めるにはどうすればよいですか?

Div 内に画像を適合させながらアスペクト比を維持する

Web デザインで作業するときの一般的なタスクは、画像を Div 内に適合させることです。アスペクト比を維持したまま div します。これにより、画像が歪まず、意図した比率が維持されます。 HTML と CSS でこれを実現するには、次のコードを利用します。

.my-div {
   width: 48px;
   height: 48px;
   overflow: hidden;
}

.my-img {
   max-height: 100%;
   max-width: 100%;
}

CSS 内で、幅と高さが固定された div (my-div) のクラスを定義します。 div の境界を越える画像コンテンツを隠すために、オーバーフロー プロパティが hidden に設定されます。

div 内では、画像クラス (my-img) が定義されます。ここでの秘訣は、max-height と max-width の両方を 100% に設定することです。これにより、画像は独自のアスペクト比を守りながら、div 内のスペースを完全に占有することができます。これらのルールがないと、div の寸法に合わせて画像が伸びたり縮んだりして、歪みが生じます。

このコードを実装すると、アスペクト比を維持しながら画像を div 内にうまく収めることができます。この手法は、さまざまな画面サイズやデバイスにわたって画像表示の応答性を確保する場合に特に役立ちます。

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