Question

我正在尝试以圆形形式显示整个图像（不裁剪或隐藏它的任何部分），同时保持纵横比。我只想使用css。

我试过了：

#propic
{
width:150px;
height:150px;
background-size:cover;
display:block;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
}

确实以圆圈形式显示我的图像，但不保持纵横比。我再试一次：

#propic
{
width:150px;
height:auto;
background-size:cover;
display:block;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
}

确实保持纵横比但形状变成椭圆形。我怎样才能做到这一点？

提前致谢。

Answer 1

由于div将是一个圆圈，因此并不完全清楚“维持宽高比”是什么意思。如果在宽图像上保持纵横比，则顶部和底部将有一个空白区域以适合圆的宽度

＆＃13;

#propic {
    width:150px;
    height:150px;
    border-radius:50%;
    background-image: url(http://lorempixel.com/g/400/200/);
    background-position: center;
    background-size:100% auto;
    background-repeat: no-repeat;
}

＆＃13;

<div id="propic"></div>

＆＃13;

作为替代方案，您可以左右裁剪图像，使图像仍然高100％

background-size:auto 100%;

JSfiddle 2nd Option

使整个图像圆形，同时保持纵横比

1 个答案: