CSS中的背景圖是網頁設計中不可缺少的元素，在布局設計上起著重要的作用。但是，在不同設備上顯示背景圖的高度可能存在問題。下面我們將介紹CSS的一種背景圖高度自適應的實現方式。

<style>
.box {
background-image: url("bg.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 0;
padding-top: 56.25%; /* 16:9的比例 */
/* padding-top: 75%; 4:3的比例 */
}
</style>
<div class="box"></div>

在上面的CSS樣式中，我們通過設置元素的height為0，然后通過padding-top來撐開元素的高度，同時設置了背景圖的大小、重復和位置。其中padding-top的值是通過背景圖的寬高比例來計算得出的。

在這個例子中，我們設置了16:9的比例，也就是padding-top為56.25%。如果你的背景圖是4:3的比例，那么你就需要設置padding-top為75%。通過這種方式來自適應不同設備的高度，使得網頁具備更好的可視性。

除了使用padding-top之外，還有其他的方式來實現自適應高度。比如，可以使用viewport單位或者JavaScript來動態計算元素的高度。而采用CSS中的padding-top方式則更為簡單、易于理解。如果你想讓你的網頁布局更加鮮活，通過掌握這種方式，你可以更加熟練地運用CSS，打造出更加美觀、合適不同分辨率設備的網頁布局。