在CSS中，我們經常需要使用圖片來美化和優化網頁的內容。但是，有些情況下，圖片會被拉伸或壓縮，導致圖像失真。為了避免這種情況，需要使用一些技巧來使圖片不被變形。

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

上述代碼的含義是，設置圖片的最大寬度為100%，但是高度自適應，這樣可以保持圖片的原始比例不變。

如果希望圖片垂直居中且不改變比例，可以使用如下代碼：

.image-container {
display: flex;
justify-content: center;
align-items: center;
}
.image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

上述代碼中，我們將圖片放在一個容器中，然后使用Flex布局來垂直和水平居中容器。同時，使用object-fit屬性來設置圖片的大小和比例。

總而言之，以上代碼可以幫助我們在CSS中避免圖片的變形問題，確保圖片的質量和美觀性。