画像を Div 内にフィットさせる際にアスペクト比を維持するにはどうすればよいですか?

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

制限されたスペース内に画像を表示する場合、多くの場合、アスペクト比を損なうことなく画像をフィットさせることが望ましいです。 HTML と CSS は、これを実現するための洗練されたソリューションを提供します。

アプローチ

画像のアスペクト比を維持するための鍵は、CSS の max-height プロパティと max-width プロパティを利用することです。実装方法は次のとおりです。

1. div の高さと幅を設定します: 画像を含める div の高さと幅を決定します。

2. 画像に max-height と max-width を適用します:

   • max-height: 100%;: 画像の高さが div の高さを超えないようにします。
   • max-width: 100%;: 画像の幅が div の幅を超えないようにします。

これにより、画像は div の範囲内で縮小または拡大されます。

例

次の HTML および CSS コードを考えてみましょう:

<div><p>この例では、画像 "my-image.jpg"元の比率を維持しながら、48x48 div 内に収まるようにサイズを動的に調整します。</p></div>

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