在開發網頁時，我們經常需要使用背景圖或背景色來裝扮頁面。然而，有時候我們可能會遇到一個問題：當我們設置背景圖時，要如何讓它既保持寬度適應屏幕又保持高度比例不變呢？本文將介紹如何使用CSS實現寬高都自適應的背景圖。

html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
background: url('your-image-url') no-repeat center center;
background-size: cover;
position: relative;
height: 100%;
}
.container:before {
content: "";
display: block;
padding-top: 56.25%;
}
.content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

上述代碼中，我們首先將html和body的高度都設置為100%，為后續的絕對定位提供基礎。接著，我們在容器元素中設置背景圖，并使用background-size: cover;將其寬度等比例縮放以適應屏幕，同時保持背景圖的比例不變。同時，我們為容器添加一個偽元素，在其中設置padding-top: 56.25%;，讓容器的高度等于其寬度的75%（具體計算方式為16:9的比例），以確保容器的高度也能隨著寬度的變化而自適應。

最后，我們使用絕對定位將容器內的內容框架固定在容器的左上角，寬度和高度均為100%。這樣，就可以實現寬高都自適應的背景圖了。希望這篇文章能幫助到你。