html - 将背景图像缩放到元素大小

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%，否则它永远不会“响应”。当然，您可以使用背景图像方法，但除非您的设计需要，否则实际上没有任何特定需要。

<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/