Div の高さを背景画像に対応させるにはどうすればよいですか?

背景画像を使用したレスポンシブ Div の高さ

レスポンシブ画像の概念を拡張し、同様の手法を div に適用して自動的に調整できます。高さは背景画像のサイズに基づきます。高さまたは最小高さを明示的に設定しなくても、これにより、流動的で動的なレイアウトを作成できます。

解決策

これを達成するには、padding-top の力を活用できます。 。 div の高さを 0 に設定し、パディングトップの値をパーセンテージとして操作することで、画像要素の動作を模倣できます。

コードの内訳は次のとおりです:

div {
    background-image: url('...');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: (image-height / image-width) * container-width;
}

• background-image プロパティに目的の画像 URL を設定します。
• background-size: contains を使用して、画像が確実にその中に収まるようにします。アスペクト比を歪めずに div を作成します。
• 画像がタイリングしないように、background-repeat を no-repeat に設定します。
• 全幅動作の場合は幅を 100% に設定します。
• 強制的な高さの制約を削除するには、高さを 0 に保ちます。
• パディングトップの値を次の比率として計算します。画像の高さにコンテナの幅を掛けた画像の幅。これにより、div の高さがそれに応じて調整されます。

例

この手法を使用して次の div を考えます。ここで、画像は高さ 853 ピクセル、幅 1280 ピクセルです。

<div>

この div は画像のサイズに基づいて高さを自動的に調整しますこれには、応答性の高い動的なレイアウト要素が作成されます。

以上がDiv の高さを背景画像に対応させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。