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

比率を維持しながら Div を画像で埋める

Web 開発では、div 要素内に画像を表示する必要が生じる場合があります。画像のアスペクト比がそのまま維持されるようにします。これは難しい問題になる可能性がありますが、解決策は CSS フレックスボックスと慎重な画像サイズの組み合わせにあります。

次のシナリオを考えてみましょう。固定サイズの div 要素とその中に画像があるとします。横向きか縦向きかに関係なく、画像が常に div を満たすようにしたいとします。この要件は、div に overflow: hidden が設定されているために画像が切り取られた場合でも満たされます。

この効果を実現するには、次の手順に従います。

• 幅と高さを削除します。画像タグから属性を取得してアスペクト比を維持します。
• ディスプレイでフレックスボックスを使用するように div 要素を設定します。 flex.
• justify-content: center と align-items: center を div 内で中央に配置して使用します。
• overflow: hidden を div に追加して、はみ出した余分な画像をトリミングします。サイズを超えています。
• div 内の画像のスタイルを次のように設定します。

.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

• フレックスシュリンク: 0 は、div が小さくなっても画像が縮小しないことを保証します。
• 最小幅: 100% min-height: 100% は、画像が常に少なくとも同じ大きさであることを保証します。 div.

この手法を使用すると、方向に関係なく、比率を維持しながら div を画像で埋めることができます。

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