在網頁設計中，圖片是一個非常重要的元素，它可以為網頁增加美感和表現力。然而，當圖片的寬度超過瀏覽器窗口的寬度時，會導致圖片被裁剪掉一部分，影響了整體的美觀度和用戶體驗。為了解決這個問題，我們可以使用 CSS 來讓圖片寬度自適應。

首先，我們需要讓圖片的父容器具有相對定位的屬性，這可以通過設置 position: relative; 來實現。接著，我們需要給圖片設置寬度為 100% ，這可以通過設置 width: 100%; 來實現。這樣就可以使圖片的寬度自適應了。

<div style="position:relative;">
<img src="example.jpg" style="width:100%;">
</div>

上述代碼中，我們使用了 div 元素作為圖片的父容器，并設置了 position: relative; 的屬性。然后，我們在 div 元素里嵌套了一個 img 元素，并給它設置了 width: 100%; 的屬性。這樣，圖片的寬度就會自動調整為父容器的寬度。

如果我們想要讓圖片在窗口縮小時不失真，可以加上 max-width: 100%; 的屬性，這樣圖片的寬度最大為 100% ，在窗口縮小時圖片就不會失真了。

<div style="position:relative;">
<img src="example.jpg" style="width:100%; max-width:100%;">
</div>

上述代碼中，我們只需要在 img 元素中加入 max-width: 100%; 的屬性即可。這樣，我們就實現了圖片的寬度自適應，并且在窗口縮小時不會失真了。