在設計網頁布局中，背景圖片是不可或缺的元素。背景圖片可以增加網頁整體美感，使網站更具吸引力。在開發網頁時，背景圖片的大小通常與屏幕大小不匹配，需要進行比例放大以適應不同的屏幕大小。

在CSS中，可以使用background-size屬性來設置背景圖片的大小。使用這個屬性時，有兩種常見的屬性值：contain和cover。contain屬性值會在保持圖片寬高比的條件下，將元素大小縮小或放大到完全容納背景圖片。而cover屬性值會在保持圖片寬高比的條件下，將元素大小縮小或放大到完全覆蓋背景區域。

background-size: contain;
background-size: cover;

然而，這兩種屬性值并不總是滿足我們需求。因此，我們需要自定義背景圖片的大小以適應不同的屏幕。下面是一種方法，可以實現背景圖片的按比例放大：

.bg {
background-image: url("image.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
}
.bg:before {
content: "";
display: block;
padding-top: 60%; /* 寬高比例 */
}

以上代碼中，.bg元素是背景圖片的容器。使用:before偽元素來生成一個虛擬的空白區域。這個空白區域的高度使用一個百分比值，來指定它相對于寬度的比例。在這個例子中，我們使用了一個60%的高度值，因為我們的圖片寬高比是3:2。

這種方法可以確保我們的背景圖片總是按比例放大和縮小。不過，需要注意的是在不同尺寸的屏幕上，比例可能不是很準確，因為像素值是整數，而高度值使用百分比。

總的來說，通過使用這種方法，可以確保背景圖片在不同的屏幕上有更好的顯示效果，提升網頁的整體質量。