Div の高さを背景画像のサイズに自動的に調整するにはどうすればよいですか?

背景画像のサイズに基づいて Div の高さを自動調整する

Web 開発では、多くの場合、Div の高さを自動的に調整することが望ましいです。背景画像のサイズ。ただし、div に特定の高さまたは最小高さを設定すると、その柔軟性が制限される可能性があります。

背景画像を img 要素のように動作させ、高さが自動的に調整される革新的なソリューションがあります。これを実現するには、画像の幅と高さの比率が必要です。

div の高さを 0 に設定し、画像の比率に基づいたパーセンテージとしてその padding-top プロパティを定義します。次のコードはこれを示しています。

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

このアプローチでは、基本的に、img 要素と同様に、自動高さの背景画像が得られます。動作するプロトタイプは http://jsfiddle.net/8m9ur5qj で見つけることができます。 div のサイズを変更して、背景画像のサイズに基づいて高さがどのように自動的に調整されるかを観察します。

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