Div の高さを背景画像に合わせて動的に調整するにはどうすればよいですか?

背景画像を使用した Div 要素の動的な高さの難題を解決する

div 要素が背景画像に合わせて高さを適切に調整するにはどうすればよいですか?固定の高さまたは最小値を手動で指定せずに、割り当てた背景画像のサイズ

背景画像の自動調整技術の公開

Web 開発者は、背景画像を持つ div 要素の画像要素の動作を模倣する独創的なソリューションを考案しました。画像のアスペクト比を利用することで、コンテナ div の高さを動的に決定できます。

段階的な実装:

1. コンテナの div の高さを設定します。 div 要素を 0 にします。
2. 画像の高さと幅の比率を使用して、パディングトップの割合を計算します。コンテナの幅を掛けます。

たとえば、高さが 853 ピクセル、幅が 1280 ピクセル、div 幅が 100% の画像があるとします。

padding-top: 66.64% /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */

CSS例:

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

実際の応用:

この手法により、背景画像に合わせて高さを自動的に調整する機能が div 要素に付与されます。これは img 要素の使用に似ていますが、明示的な高さまたは最小高さの宣言は必要ありません。

この実際の例を確認してください: http://jsfiddle.net/8m9ur5qj/

Byコンテナのサイズを変更すると、背景画像のアスペクト比を維持しながら、div の高さがどのように動的に変化するかを確認できます。

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