Html 仅使用 CSS 的矩形图像上的圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25267774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rounded corners on rectangular image using CSS only
提问by Simon
I'd like to create a round image from a rectangular image using radius-border.
我想使用半径边框从矩形图像创建圆形图像。
Is there simple way to achieve this with CSS without distorting the image AND ensuring a circle is perfectly round.
有没有简单的方法可以用 CSS 实现这一点，而不会扭曲图像并确保圆形是完美的。
See failed attempts here:
在此处查看失败的尝试：
.rounded-corners-2{
border-radius: 100px;
height: 150px;
width: 150px;
Can this be done in only CSS.....?
这只能在CSS中完成吗.....？
回答by Benjamin
You do that by adding a parent div to your img and the code flows as follows
您可以通过向 img 添加父 div 来实现，代码流如下
figure{
width:150px;
height:150px;
border-radius:50%;
overflow:hidden;
}
回答by Roko C. Buljan
object-fit
object-fit
img{
width:80px;
height:80px;
border-radius: 50%;
object-fit: cover;
}<img src="http://placehold.it/800x400/0bf">imgwith background image
img有背景图片
For older browsers, using the <img>tag
对于较旧的浏览器，使用<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;">The trick is to set a transparent px for the src(to prevent broken imageicon) and do the best CSS3 and background-size has to offer (cover).
诀窍是为src（以防止损坏的图像图标）设置一个透明的像素，并尽最好的 CSS3 和 background-size 提供（cover）。
回答by arielnmz
Is there simple way to achieve this with CSS without distorting the image AND ensuring a circle is perfectly round.
有没有简单的方法可以用 CSS 实现这一点，而不会扭曲图像并确保圆形是完美的。
Yes, and you can also avoid using parent elements by just setting the image as the background. You can also position the image as you wish by using the background-positionattribute.
是的，您还可以通过将图像设置为背景来避免使用父元素。您还可以使用该background-position属性随意定位图像。
Updated to address concerns about size, roundness, skewing and dynamically loaded content.
更新以解决有关大小、圆度、倾斜和动态加载内容的问题。
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" />回答by KnightHawk
http://jsfiddle.net/o8fwpug5/37/
http://jsfiddle.net/o8fwpug5/37/
This is a slight update of a previous answer. I liked the other answer, but this is a bit more streamlined and gives a pixel based width for the wrapper. This way it is easier to see and change the dimensions for your own purposes.
这是对先前答案的轻微更新。我喜欢另一个答案，但这更精简一些，并为包装器提供了基于像素的宽度。通过这种方式，您可以更轻松地查看和更改尺寸以满足您自己的目的。
HTML:
HTML：
<div><img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /></div>
CSS:
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;
}
回答by JRulle
Put a DIV frame around the image: DEMO
在图像周围放置一个 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;
}
note: you don't need your img.rounded-corners style anymore
注意：您不再需要 img.rounded-corners 样式
