CSS中的圖片按比例放大是一種常見的需求，通常用于網站中的響應式設計或平滑過渡動效。本文將介紹如何使用CSS實現圖片的按比例放大。

img {
max-width: 100%;
height: auto;
}

上述代碼中，我們定義了一個img元素的樣式，其中max-width屬性用于限制圖片的最大寬度，height:auto用于保持圖片的寬高比不變。當圖片所在容器超出max-width的寬度時，圖片將按比例縮小至max-width的寬度；當容器寬度小于max-width時，圖片不會超出容器寬度，而是按比例縮小至適合容器的大小。

同時，我們還可以使用CSS的過渡效果來實現圖片的平滑放大。例如：

img:hover {
transform: scale(1.2);
transition: all 0.3s ease-in-out;
}

上述代碼中，我們定義了鼠標懸停在圖片上時的樣式，其中transform:scale(1.2)用于將圖片放大1.2倍，transition則指定了過渡效果的類型、時長和速度曲線。這樣，在鼠標懸停在圖片上時，圖片將平滑地放大至指定的大小。

總之，通過CSS的max-width和height:auto屬性，我們可以實現圖片的按比例放大；通過過渡效果，我們還可以實現更加平滑的放大效果。這些方法都可以應用于各種Web設計和開發場景中，為用戶帶來更好的體驗。