Question

我想要一个可以缩放以适合的圆形图像。我尝试了以下代码和圆形刻度，但我的图像不随其缩放。图像在圆圈内显示的唯一方法是将图像作为背景URL放入。也许有人可以指出我正确的方向。这是代码：

HTML

<div id="circlePicHolder" class="circularImageHolder">
      <div class="circularImage"></div>
</div>

CSS

.circularImageHolder{
     width: 100%;
     height:100%;
     padding-top:5%;
 }

 .circularImage{
        width: 100%;
        padding-bottom: 100%;
        height:0;
        background-image:url('college.gif');
        background-color:white;
        border: 1px solid red;
        margin:0 auto;
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
}

.circularImage img{
     max-width:100%;
     max-height:100%;
}

感谢。

Answer 1

将图像设置为100％宽度，然后您可以将图像本身放在circlePicHolder内。您必须为.circularImage设置100％的wdith，否则它将永远不会响应＆＃34;。当然你可以使用背景图像方法，但除非你的设计需要它，否则没有任何特定的需要。

<div id="circlePicHolder" class="circularImageHolder">
    <img src="/url.png">
</div>

.circularImageHolder{
     width: 100%;
     height:100%;
     padding-top:5%;
     text-align: center;
 }
.circularImageHolder img{
    width: 100%;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 1px solid red;
}

请记住，您的图像高度和宽度必须相等才能在CSS的这种特定方法中实现此效果，例如，请参阅此jsfiddle; http://jsfiddle.net/RwmGQ/2/

Answer 2

您可以申请

.circularImage{
    ...
    background-size: 100% 100%;
    ...
}

这样，背景图像会在您调整大小时缩放

http://jsfiddle.net/U5LLW/1/

或者如果你想使用图像，你需要确保隐藏溢出或图像不在你的边界范围内

http://jsfiddle.net/U5LLW/3/

.circularImage{
    overflow: hidden;
    border: 1px solid red;
    margin:0 auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.circularImage img{
    width: 100%;
}

img应该是宽度100％，如果你只使用max-width，那么当容器的大小超过图像大小时，图像将不会变大。如果您将容器设置得更小但不是更大

，则最大宽度可行

缩放背景图像到元素大小

2 个答案: