3

我有一个 200x100 的矩形图像，我将它缩小到 50px，同时通过使用保留其原始纵横比

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

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

谢谢

4

1 回答 1

6

简而言之：

.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%旧浏览器的图像（取决于您是否想要全宽或全高）。

于 2013-10-24T22:17:31.493 回答