CSS圖片按比例自適應是網頁開發中一個非常重要的問題，尤其對于響應式設計來說，更是必不可少的技能。

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

上述代碼是當前最流行的實現圖片自適應的方法。

這段代碼的作用是限制圖片的最大寬度為100%。當圖片所在的容器尺寸小于圖片實際大小時，圖片會根據容器尺寸約束縮小而不會將自己撐開。而當容器尺寸大于圖片實際大小時，圖片會以自己的尺寸顯示，不會出現圖片變模糊等問題。

此外，設置height:auto也是非常關鍵的操作。因為若只設置max-width: 100%而不設置height: auto時，當圖片寬度小于所在容器寬度時，圖片高度也會被縮小以保持寬高比，但圖片的高度被設置過后就無法自適應縮放了，也就是說只能縮小不能放大，這樣在一些容器尺寸變化的情況下，就會出現在一些設備上圖片過小，而在另一些設備上圖片過大的問題。

當然，除了上述方法以外，還有一些其他的方式實現圖片自適應，例如使用background-image實現、媒體查詢實現等等。但相比而言，以上的方式是最為簡單、易懂、效果最好的一種方式，大家可以根據自己的需求靈活運用。