在網頁設計過程中，圖片是不可或缺的元素。然而，如果在頁面中不妥善設置圖片，會導致圖片變形或拉伸，給用戶帶來糟糕的瀏覽體驗。為避免這種情況發生，本文將介紹如何在HTML中設置頁面圖片不變形。 在HTML中，我們可以使用img標簽來插入圖片，代碼如下：

<img src="圖片路徑">

其中，src屬性指定了圖片的路徑。如果想要圖片在網頁中不變形，需要使用一些屬性對其進行鋪滿或等比縮放。 方法一：使用CSS樣式來設置圖片的寬度和高度

<img src="圖片路徑" style="width:100%; height:auto">

上述代碼中，使用了CSS的width屬性將圖片的寬度設置為100%，height屬性則自動適應。這樣做可以讓圖片在不改變比例的情況下鋪滿整個容器。 方法二：使用object-fit屬性來等比例縮放圖片

<img src="圖片路徑" style="object-fit:cover; width:100%; height:100%">

通過使用CSS3的object-fit屬性，可以讓圖片在容器中等比例縮放并覆蓋其整個區域。cover值將圖片拉伸或壓縮到適合容器的大小，并保持其比例。對于小尺寸的圖片，其他值比如contain，可以讓圖片縮放到合適的大小并在容器內居中顯示。 總結：插入圖片時，使用CSS樣式或object-fit屬性可以讓圖片在網頁中保持原有比例不變形。對于不同的情況，使用不同的方法能夠產生更好的效果，提升用戶瀏覽體驗。