今天在使用CSS布局時，發現一些圖片的顯示效果竟然非常模糊。讓我很苦惱。其實這是因為圖片拉伸的原因，下面我來簡單介紹一下。 首先，CSS圖片的顯示大小與原圖大小不一致時，就會出現變形或者模糊的情況。比如，我們指定一個圖片的寬度為200px，而這個圖片原本的寬度只有100px，那么圖片就會被拉伸，顯示效果就會變得模糊。 解決這個問題非常簡單，只需要在CSS中設置圖片的寬度和高度時，保證與原圖比例相等即可。比如我們可以這樣寫：

img {
width: 200px;
height: auto;
}

width設置為200px，高度設置為auto，這樣圖片就能保持比例，不會出現變形或模糊的情況。height為auto的含義是，按照原圖比例自動計算高度。 除了以上方法，我們還可以使用Retina技術來提升圖片的顯示效果。Retina技術是蘋果推出的高分辨率屏幕技術，能夠把圖片的顯示效果提高到極致。 可以通過設置圖片的倍數來實現。以2倍為例，代碼如下：

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
img {
width: 200px;
height: auto;
/* 設置2倍圖片 */
background-image: url('image@2x.png');
background-size: cover;
}
}

通過media查詢，我們可以設置圖片在不同屏幕分辨率下的顯示效果。 總結一下，當我們在使用CSS布局時，遇到圖片模糊的情況，首先要檢查圖片的拉伸情況，確保寬高比例正確，同時可以嘗試使用Retina技術提升圖片的顯示效果。