缩放矩形图像上的 CSS 圆形边框

Question

我有一个 200x100 的矩形图像，我将它缩小到 50 像素，同时通过使用

保留其原始纵横比

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

我想给它一个圆形的图片效果，所以使用了border-radius: 50%。但是，这不会起作用，并且会给我一个椭圆形的图像，因为图像不是一个完美的正方形。我将如何在保留原始图像纵横比的同时解决这个问题？我也可以在我的图像周围添加白色条纹以填充空白并使其成为正方形。

谢谢

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% (取决于你是想要全宽还是全高)。