當我們在網站中使用圖片時，常會遇到一個問題，那就是圖片會變形或失真。這個問題很討厭，因為它會影響到網站的整體效果。但是使用CSS的方法來使圖片不失真，會非常有用。

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

上面的代碼塊是利用 CSS 的一個屬性 max-width。通過這個屬性，我們避免了圖片破裂或失真的問題。 這是因為我們在給 img 標簽加了一個最大寬度為 100% 的 max-width 屬性。

當圖片超過了 img 標簽所在的父級元素的寬度時，CSS 會自動將圖片的寬度縮小，從而使圖片適應所在區域的大小。這個屬性同時會影響到圖片的高度。因為我們也給圖片的高度加了一個自適應的屬性 height: auto。這樣就可以避免圖片失真問題。

除了以上這種入門級的方法之外，還有很多其他的方法可以使圖片保持原有的比例和大小。例如，我們還可以使用 background-size、object-fit 或 img { width: 100%; height: auto; } 這個屬性。

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

最后，小編提醒大家，當我們在制作網站時，記得一定要對圖片進行壓縮處理。這樣可以減少圖片的大小，從而提高網頁的加載速度，同時也能減輕服務器的負擔。