CSS是前端開發中不可缺少的技術之一，其樣式控制能力也無限擴展。在網頁設計中，圖片是十分常見的元素，但圖片在頁面布局中往往會遇到圖片變形的問題，影響美觀性。接下來我們將介紹如何使用CSS控制圖片不變形。

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

在CSS中，使用標簽來控制圖片。我們可以使用max-width屬性，使其根據容器自適應布局，而不會遇到大小超出容器而變形的問題。同時，我們還可以使用height: auto屬性，使圖片的高度自適應寬度的變化，實現在不同大小的設備上都不會出現變形的效果。

另外，還可以使用CSS3的object-fit屬性，該屬性用于指定圖像如何適應到元素的高度和寬度中。

img {
width: 400px;
height: 300px;
object-fit: cover;
}

上述代碼中的object-fit: cover;屬性將圖像尺寸縮放至元素中同時保持圖像的寬高比例，也就是說，圖像會被縮放成大于或等于容器的尺寸，并且不會變形。

所以，在設計網頁時，我們應該使用CSS技術控制圖片不變形，提高網頁設計的美觀性和用戶體驗。