我們如何在html中顯示圖像的圈選區域？

Question

我有一個長方形的圖像。不過，我想達到最終結果如下。

我如何在CSS/JavaScript的實現這一目標？

Answer 1

可以使用邊界半徑實現它：

.circle { 
    border-radius: 50%; 
    width: 200px; 
    height: 200px; 
    /* width and height can be anything, as long as they're equal */ 
} 

欲瞭解更多信息請查看本article。

Answer 2

如果你有一個img標籤，不是簡單地使用代碼段下面，使其圓

.container_class img { 
    border-radius: 50%; 
    height: 200px; 
    width: 200px; 
} 

Demo

Demo 2（有邊框）

---

以上的例子會給你是一個完美的圓形，如height = width，如果你想要一個橢圓形狀，正如你已經親在你的問題vided，比你可以簡單地增加你的img標籤的width像

Demo

注：border-radius是CSS3屬性，目前它是跨瀏覽器廣泛 支持，猶若IE是遊戲擾流板給你， 有在IE8不支持雖然可以像CSS3 Pie

Answer 3

使用border-radius: 50%; polyfills。

Answer 4

你在這裏。

WORKING DEMO

的HTML：

<img src="http://coolvibe.com/wp-content/uploads/2013/01/Portrait-Alexander-Beim-Bruce.jpg" /> 

的CSS：

img{border-radius:500px; border:2px solid #000000; width:200px; height:200px;} 

我希望這是你在找什麼。

Answer 5

img{ 
    border-radius:50%; 
    border:1px solid #000000; 
    height:150px; 
    width:200px; 
} 
/*You can change height width*/