仅使用CSS的矩形图像上的圆角
仅使用CSS的矩形图像上的圆角
提问于 2014-08-12 23:03:42
我想创建一个圆形图像从一个矩形图像使用半径-边界。
有没有简单的方法可以在不扭曲图像的情况下用CSS实现这一点，并确保圆圈是完美的圆形。
请在此处查看失败的尝试：
.rounded-corners-2{
border-radius: 100px;
height: 150px;
width: 150px;这只能在CSS中完成吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-08-12 23:09:17
您可以通过将父div添加到img来完成此操作，代码流程如下
figure{
width:150px;
height:150px;
border-radius:50%;
overflow:hidden;
}Stack Overflow用户
发布于 2014-08-12 23:23:39
http://jsfiddle.net/o8fwpug5/37/
这是对previous answer的轻微更新。我喜欢另一个答案，但这个更流畅，并且给出了一个基于像素的宽度作为包装器。这样，您就可以更容易地查看和更改尺寸。
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25267774
复制相关文章
相似问题