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

Question

我有一个200x100的矩形图像,我将其缩小到50px,同时保留其原始宽高比

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%旧浏览器(取决于您是要全宽还是全高) ).