在網站設計中，圖片的使用是必不可少的。但是，在使用圖片時，可能會遇到圖片的變形問題。這種情況很常見，特別是在使用 CSS 時，經常使用的 img 標簽來表示圖片。而在通常情況下，圖片的尺寸是固定的，而 CSS 樣式中的尺寸是根據瀏覽器大小來定的。因此，我們需要采取一些措施，如何在 CSS 中保持圖片不變形就顯得尤為重要。

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

如果在 CSS 樣式中設置了 img 標簽，可以使用 max-width 屬性。當圖片的寬度超過容器的寬度時，圖片會自動縮小到容器的寬度。因此，圖片就不會失真或變形，而保持原有的比例。如果只是設置 max-width 屬性，那么這個圖片在高度上就會超出容器，因此還需要設置 height: auto 屬性，確保圖片按比例縮放。

如果需要在一個固定容器內展示一張圖片，可以將圖片放在一個 div 容器內，設定該 div 的寬和高，然后在 img 標簽中，將寬度和高度都設為 100% 并根據需要設置 overflow 屬性，通常為 hidden。這樣一來，圖片就不會變形了。

在開發網站的時候，避免圖片失真或變形變得尤為重要。在 CSS 中使用 max-width 屬性是最好的解決方式，可以保持圖片的比例，同時保持圖片的清晰度和高質量。