仅使用CSS在矩形图像上的圆角 [英] Rounded corners on rectangular image using CSS only

问题描述

我想使用半径边界从矩形图像创建圆形图像.

I'd like to create a round image from a rectangular image using radius-border.

有没有一种简单的方法可以用CSS实现此目的，而又不会扭曲图像并确保圆是完美的圆形.

Is there simple way to achieve this with CSS without distorting the image AND ensuring a circle is perfectly round.

在此处查看失败的尝试:

See failed attempts here:

http://jsfiddle.net/v8g3y0na/

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

这只能在CSS中完成吗?....?

Can this be done in only CSS.....?

推荐答案

您可以通过在img中添加父div来做到这一点，代码流如下所示

You do that by adding a parent div to your img and the code flows as follows

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

更新的演示

这篇关于仅使用CSS在矩形图像上的圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！