在Web開發的過程中，圓形的圖片在很多設計稿中都是經常出現的，而通過CSS設置圖片實現這種效果也是很簡單的。

首先，我們需要一個圖片:

<img src="avatar.jpg" alt="avatar" />

接下來，我們使用CSS來設置圖片為圓形:

img{
border-radius: 50%;
}

以上代碼使用了border-radius屬性，將圖片的四個角全部變為圓形的。如果要使得圖片變得更加自適應，可以再加上如下的CSS代碼:

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

通過設置最大寬度為100%，圖片可以隨著頁面大小進行自適應變化。同時，將高度設置為自動，則可以按比例縮放圖片，保證圖片不失真，同時又能夠自適應。

通過以上的CSS設置，就可以輕松地將圖片變為圓形，并且自適應頁面大小了。