html - 如何使用 CSS 使矩形图像显示为圆形

Question

我用过 border-radius: 50%或 border-radius: 999em ，但问题是一样的:对于方形图像没有问题，但是对于矩形图像我得到一个椭圆形的圆。我也倾向于裁剪图像的一部分(很明显)。有没有一种方法可以使用纯 CSS(或至少 JavaScript/jQuery)而不使用 <div> 来做到这一点？用background-image , 但只使用 <img>标签？

Answer 1

我认为您对 background-image 的问题在于，如果样式表中的每个图像都有一个来源，它会效率低下。我的建议是将源设置为内联:

<div style = 'background-image: url(image.gif)'></div>

div {
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

Fiddle