CSS 是前端開發中最重要的技術之一，可以幫助我們更好地呈現網頁內容。當我們需要在網頁中添加一些圖片的時候，有時候會出現圖片擠壓、變形或過度拉伸的問題，這時候就可以使用 CSS 中的圖片按比例填充技術。

圖片按比例填充的方法有很多種，其中最常用的方法是通過設置background-size屬性來自動調整圖片大小，保持圖片的寬高比例不變。以下是一個示例代碼：

.container {
width: 500px;
height: 300px;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}

在上面的代碼中，我們通過設置容器.container的寬高比例為 500:300，并且設置了background-size: cover來保持圖片寬高比例不變，同時填充整個容器。同時通過設置background-position: center center讓圖片在容器中居中顯示。

需要注意的是，如果我們需要將圖片縮放后居中顯示，可以使用background-position屬性將圖片中心點與容器中心點對齊。

另外，在一些特殊情況下，我們可能需要將圖片縮放后調整位置，這時候可以結合使用background-position和background-size屬性，來調整圖片位置和大小。

總之，使用圖片按比例填充技術可以幫助我們更好地控制圖片在網頁中的展示效果，使其更美觀、適配性更強。