我们如何在html中显示图像的圆圈区域？

Question

我有一个长方形的图像。但是，我希望得到如下的最终结果。

如何在CSS / javascript中实现这一目标？

Answer 1

您可以使用border-radius实现它：

.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，如果您想要一个椭圆形状，就像您在问题中提供的那样，那么您可以简单地增加{{1}你的width标签就像

一样

Demo

  

注意：img是一个CSS3属性，截至目前它已广泛使用   支持跨浏览器，如果IE是你的游戏剧透，   有像CSS3 Pie

这样的填充物

Answer 3

虽然IE8中不支持使用border-radius: 50%;。

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*/