Блог

Я пытаюсь получить круглое изображение, которое масштабируется по размеру. Я попробовал следующий код и масштабирование круга, но мое изображение не масштабируется вместе с ним. Единственный способ, которым изображение будет отображаться внутри круга, — это если я помещу изображение в качестве фонового 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%;
}
 

Спасибо.

Установите для вашего изображения ширину 100%, затем вы можете поместить само изображение внутрь circlePicHolder . Вы должны установить значение 100% .circularImage , иначе оно никогда не будет «отзывчивым». Конечно, вы можете использовать метод фонового изображения, но в этом нет особой необходимости, если только этого не требует ваш дизайн.

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

Вы можете применить

 .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, тогда, когда размер контейнера превышает размер изображения, изображение не станет больше. Max-width работает, если вы делаете контейнер меньше, но не больше