CSS中給元素添加背景圖片非常簡單，只需要使用background-image屬性即可。但是當背景圖片過大時，會導致元素布局的不合理。為了解決這個問題，我們需要采用按比例縮小背景圖片的方法。

/* 定義容器的寬度和高度 */
.container {
width: 500px;
height: 300px;
/* 設置背景圖片 */
background-image: url('bg.jpg');
/* 設置背景圖像的位置為居中 */
background-position: center center;
/* 設置背景圖片不重復 */
background-repeat: no-repeat;
/* 設置背景圖片按比例縮小 */
background-size: contain;
}

在上述代碼中，我們給容器設置了寬度和高度，并且使用了background-image屬性來設置背景圖片。同時，我們還使用了background-position屬性來將背景圖片居中對齊，并且使用了background-repeat屬性來防止背景圖片重復顯示。

最關鍵的部分就是background-size屬性，我們設置它的值為contain，意思是讓背景圖片按照它本來的比例縮小，直到它的寬度或者高度能夠完整地包含在容器中為止。

總的來說，使用按比例縮小背景圖片的方法能夠使網頁的排版更加合理，讓用戶享受更好的視覺體驗。