div の高さを背景サイズに合わせて自動調整するにはどうすればいいですか? 質問する

背景画像を要素のように機能させimgて自動的に調整する、とても素敵でクールな方法がありますheight。画像widthとheight比率を知っておく必要があります。heightコンテナーの を 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) */
}