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

Question

我有一个矩形的图像。但是，我想达到如下的最终结果。

在此处输入图像描述

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

score 3 · Accepted Answer

如果您有img标签，则只需使用下面的代码片段将其变为圆形

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

Demo 2（带边框）

上面的例子会给你一个完美的圆圈height= width，如果你想要一个椭圆形，就像你在问题中提供的那样，你可以简单地增加width你的img标签

注意：border-radius是一个 CSS3 属性，到目前为止，它在浏览器中得到了广泛支持，如果 IE 对你来说是一个游戏剧透，那么有可用的 polyfills，比如CSS3 Pie

score 3 · Accepted Answer

您可以使用边界半径来实现它：

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

有关更多信息，请查看这篇文章。

score 2 · Accepted Answer

2

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

于 2013-08-27T06:55:42.147 回答

score 1 · Accepted Answer

干得好。

的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;}

我希望这就是你要找的。

score 0 · Accepted Answer

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

5 回答 5