在網頁設計的過程中，圖片的大小和比例往往非常重要。有時候會需要顯示一張精心設計的圖片，但是由于網頁布局的需要，圖片卻被拉伸或壓縮，導致原本的精美效果失真。為了避免這種情況的發生，我們可以使用 CSS 來禁止圖片的拉伸。

當圖片被伸展至網頁寬度時，圖片會自動縮小。如果圖片的寬高比例與容器的寬高比例不同，那么圖片就會被拉伸，出現失真的情況。為了避免這種情況的發生，可以使用 CSS 中的max-width和max-height屬性來控制圖片的大小。

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

使用上述 CSS 代碼，可以讓圖片在顯示時保持原有的比例，而不會出現拉伸或者壓縮的情況。同時，我們還可以使用object-fit屬性來控制圖片在容器中的位置和大小。object-fit屬性有四個值可以選擇：

• contain：圖片自動縮放，保持原有比例，盡可能填充整個容器，容器留白；
• cover：圖片放大或縮小，保持原有比例，完全填充整個容器，可能會出現裁剪；
• fill：圖片自動縮放，鋪滿整個容器，比例可能不同；
• scale-down：根據圖片的大小和容器大小，自動選擇contain或none。

img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

通過設置object-fit屬性為contain，可以讓圖片自動縮放，并保持原有比例。使用這種方法可以有效地避免圖片因為被拉伸而出現失真的情況，讓網頁呈現出更好的效果。