在Web開發(fā)的過程中，圓形的圖片在很多設(shè)計稿中都是經(jīng)常出現(xiàn)的，而通過CSS設(shè)置圖片實現(xiàn)這種效果也是很簡單的。

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

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

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

img{
border-radius: 50%;
}

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

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

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

通過以上的CSS設(shè)置，就可以輕松地將圖片變?yōu)閳A形，并且自適應頁面大小了。