今天我們來分享一個關于CSS頭像顯示不變形的技巧。 首先，我們知道頭像常常是以正方形的形式呈現，但是當我們給它指定一個具體的寬高時，如果圖片本身的寬高比例與指定的寬高比例不一致，就會導致圖片變形的問題。 為了解決這個問題，我們可以使用CSS的object-fit屬性來處理。它可以讓圖片按照指定的寬高比例自適應填充容器，而不失真。但是要注意，這個屬性在老版本瀏覽器（如IE）中不被支持。 接下來，我們可以看下面的代碼示例：

.avatar {
width: 150px;
height: 150px;
object-fit: cover; /* 這里是關鍵屬性 */
border-radius: 50%; /* 使頭像變成圓形效果 */
}

我們在這里設置了一個150x150的頭像容器，并使用“cover”來指定圖片充滿整個容器，同時保持寬高比。當然，你也可以選擇其他的object-fit屬性值，比如“contain”，“none”或“scale-down”，根據具體需求進行選擇。 最后，我們還可以給頭像添加一個圓角效果，使用border-radius屬性就可以實現。 希望這個技巧可以幫助大家解決CSS頭像變形的問題。