眾所周知，通常使用CSS來控制圖片的大小是通過設置 width 和 height 屬性來實現的。但是，當我們需要將一個小圖片放大到一個比它更大的容器中時，圖片將變形并失去其本來的質量。

CSS3 中提供了一種解決方案，叫做 background-size。這個屬性可以讓你自由地控制背景圖片的大小，并在縮放時保持其比例，從而避免了圖片失真的問題。

.container {
background-image: url('example.jpg');
background-size: contain;
background-repeat: no-repeat;
}

上面的示例代碼中，contain 值指定了圖片應該填充容器并盡可能多地顯示圖片的內容，而不改變其比例。在這種情況下，圖片將在容器中水平和垂直居中。

還有另外一個屬性值可以使用，叫做 cover。cover 值將圖片放大，以填充容器并且完全覆蓋它。同樣地，縮放時比例將保持不變。

.container {
background-image: url('example.jpg');
background-size: cover;
background-repeat: no-repeat;
}

無論你使用哪個值，都可以確保圖片在縮放時保持比例，從而避免了圖片變形的問題。

不過需要注意的是，如果圖片本身的質量不足或者分辨率不夠高，那么即使你使用 background-size，也不會改善質量或分辨率。因此，在選擇一張圖片時，建議選擇高質量和高分辨率的圖片以便在縮放時具有更好的效果。