CSS对缩放后的矩形图片设置圆形边框

Question

我有一张200x100的矩形图片，我将其缩小到50px但保持了原始宽高比，使用了

max-width: 50px;
max-height: 50px;

我希望给我的图片添加一个圆形效果，因此使用了border-radius: 50%。但是，由于图片不是一个完美的正方形，这种方法不能实现目标，而是得到一个椭圆形的图片。如何解决这个问题并保持原始图片的长宽比？如果在我的图片周围加上白色条纹来填补空白并使其变成一个正方形，我也可以接受。

谢谢

- Infinity

---

@Jasper 我该如何先把它变成正方形呢？我不想裁剪图像的某些部分。但是，我不介意用白色背景填充图像周围的空白间隙来使其成为正方形。 - Infinity

如果你正在寻找一个纯 CSS 的解决方案，唯一的方法就是将图片裁剪成正方形，然后应用50%的圆角半径。或者，您可以使用JavaScript来创建一个（正方形）div元素包围着图片，隐藏实际图片并使用图像URL作为div背景，此时可应用background-size: cover属性。 - Terry

另外，您的图像是否都具有相同的宽高比（2:1），还是存在变量？ - Terry

@QuynhNguyen 我会使用CSS背景属性来显示图片。您可以将元素设置为正方形，任何尺寸，然后将其背景图像设置为要显示的图像，并为现代浏览器设置background-size为contain，对于旧浏览器则设置为类似于100% auto或auto 100%（取决于您想要全宽还是全高）。 - Jasper

如果是这种情况，纯CSS方案非常困难（或几乎不可能）。您是否考虑使用基于JS的解决方案？ - Terry

Answer 1

简而言之：

.my-ele {
    background-color    : #000;
    background-image    : url([URL TO IMAGE]);
    background-repeat   : no-repeat;
    background-position : 50% 50%;
    background-size     : 100% auto;
    background-size     : contain;
    width               : 300px;
    height              : 300px;
    border-radius       : 50%;
}

这里是一个演示：http://jsfiddle.net/ArURx/1/ 我建议使用CSS背景属性来显示图片。您可以将元素设置为正方形或其他尺寸，然后将其背景图像设置为您想要显示的图像，并将background-size设置为contain（适用于现代浏览器），对于旧版浏览器，您可以将其设置为100% auto或auto 100%（具体取决于您想要全宽度还是全高度）。

- Jasper

---

如果图像来源于img src标签而不是background-image，那么上面所做的相同效果仍然可以实现吗？ - Infinity

如果你想将<img src="">转换为<div>源代码，你需要依靠JavaScript。 - Terry

@Terry，实际上是相反的。Jasper几乎已经得到了它，因为我想使用“<img src="">”来获得完全相同的效果，而不必设置背景图像。 - Infinity

不，我的意思是，如果您不想修改标记（仅在页面上使用<img>），并且希望为此动态创建<div>元素，则需要依靠JS将图像源注入为背景图像。 - Terry

@QuynhNguyen 使用 <img /> 元素，只有在元素具有相等的高度/宽度尺寸时才能制作圆形。使用背景图像的美妙之处在于您可以根据需要剪裁图像。 - Jasper

只是一个快速的提示，这个解决方案很好用，如果你已经搜索并找到了它，但想让你的图像填充创建的圆形，请使用：background-size:auto 100%;和background-size:cover; - Marcus