仅使用CSS在矩形图像上的圆角

Question

我想使用半径边框从矩形图像创建圆形图像。

有没有简单的方法来实现这一点与CSS而不扭曲图像并确保圆是完美的圆形。

看到失败的尝试：

http://jsfiddle.net/v8g3y0na/

.rounded-corners-2{
    border-radius: 100px;
    height: 150px;
    width: 150px;

这可以只在CSS中完成吗？

Answer 1

您可以通过向img添加父div来实现，代码流程如下所示

figure{
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
}

更新了演示

Answer 2

object-fit

 img{ width:80px; height:80px; border-radius: 50%; object-fit: cover; } 

 <img src="http://placehold.it/800x400/0bf"> 

img与背景图像

对于旧版浏览器，请使用<img>标记

 <img alt="My image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background: url(http://placehold.it/300x180/0bf) 50% / cover; border-radius: 50%; width:150px;"> 

诀窍是为src设置一个透明的px（以防止损坏的图像图标）并做最好的CSS3和背景大小必须提供（ cover ）。

Answer 3

有没有简单的方法来实现这一点与CSS而不扭曲图像并确保圆是完美的圆形。

是的，您也可以通过将图像设置为背景来避免使用父元素。 您还可以使用background-position属性按位置定位图像。

更新以解决有关大小，圆度，倾斜和动态加载内容的问题。

 setTimeout(function() { $("#image").css("background-image", "url(https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97350&w=150&h=350)"); }, 3000); 

 #image { display: block; background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"); border-radius: 200px; width: 200px; height: 200px; background-size: cover; background-position: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img id="image" /> 

Answer 4

http://jsfiddle.net/o8fwpug5/37/

这是对先前答案的略微更新。 我喜欢另一个答案，但这更加流线型，并为包装器提供了基于像素的宽度。 这样，您可以更轻松地查看和更改尺寸以用于您自己的目的。

HTML：

<div><img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /></div>

CSS：

div{
    height:200px;
    width:200px;
    position:relative;    
    border-radius:100%;
    overflow:hidden;
}
img{
    position:absolute;
    left:-50%; right:-50%; top:0;
    margin:auto;
    height:100%; width:auto;
}

Answer 5

在图像周围放置一个DIV框架： DEMO

<div class="rounded-corners">
   <img src="http://welovekaleycuoco.com/wp-content/uploads/2013/11/Kaley-Cuoco-Wallpapers-81.jpg" width="200"> 
</div>

div.rounded-corners {     
    height: 150px;
    width: 150px; 
    border-radius: 50%;
    overflow: hidden;
}

注意：你不再需要你的img.rounded-corner风格了