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或{ {1}}适用于旧浏览器（取决于您是要全宽还是全高）。

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

1 个答案: