在網頁設計中，CSS 是一種非常重要的實現樣式和布局的技術。然而，有時候我們會遇到一些 CSS 怪異盒問題，比如說圖片會被拉伸，而非按照原來的比例顯示。

當我們使用 width 和 height 屬性控制圖片大小時，有時候會出現這種問題。這是因為圖片的寬高比例和我們設置的寬高比例不匹配導致的。比如說，當我們把圖片寬度設置為 100px，高度設置為 80px 時，如果圖片原本的寬高比例為 2 ：1，那么圖片會被拉伸以適應我們設置的大小。

img {
width: 100px;
height: 80px;
}

要解決這個問題，我們可以使用 object-fit 屬性，它可以讓圖片在保持原有比例的情況下，適應我們設置的尺寸。object-fit 屬性有四個值：fill、contain、cover 和 none。

• fill：強制圖片適應指定的尺寸，會拉伸圖片以填滿容器。
• contain：保持原有比例，縮放圖片以適應容器。
• cover：保持原有比例，裁剪圖片以適應容器。
• none：保持圖片原有大小。

img {
width: 100px;
height: 80px;
object-fit: cover;
}

在使用 object-fit 屬性時，需要注意一些兼容性問題。不是所有的瀏覽器都支持這個屬性，所以當你的網站需要兼容到老舊瀏覽器時，需要做一些額外的處理，比如說使用 JavaScript 來解決這個問題。

總之，CSS 怪異盒問題是網頁開發中常見的問題之一，解決這些問題需要不斷學習和探索。