Bootstrap 3: Используя img-circle, как получить круг из неквадратного изображения?

Ответ 1

Я вижу, что этот пост немного устарел, но все же... Я могу показать вам и всем остальным (кто в такой ситуации, как я был в этот день), как я это сделал.

Прежде всего, вам нужен html, например:

<div class="circle-avatar" style="background-image:url(http://placekitten.com/g/200/400)"></div>

Чем ваш класс css будет выглядеть так:

div.circle-avatar{
/* make it responsive */
max-width: 100%;
width:100%;
height:auto;
display:block;
/* div height to be the same as width*/
padding-top:100%;

/* make it a circle */
border-radius:50%;

/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;

/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;

/* it is optional, for making this div centered in parent*/
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

Это отзывчивый круг, ориентированный на исходное изображение. Вы можете изменить width и height, чтобы не автозаполнение родительского элемента, если хотите. Но держите их равными, если вы хотите получить круг в результате.

Ссылка с решением на fiddle

Я надеюсь, что этот ответ поможет бороться с людьми. Bye.

Ответ 2

Я использую эти два метода в зависимости от использования. FIDDLE

<div class="img-div">
<img src="http://placekitten.com/g/400/200" />
</div>
<div class="circle-image"></div>

div.img-div{
    height:200px;
    width:200px;
    overflow:hidden;
    border-radius:50%;
}

.img-div img{
    -webkit-transform:translate(-50%);
    margin-left:100px;
}

.circle-image{
    width:200px;
    height:200px;
    border-radius:50%;
    background-image:url("http://placekitten.com/g/200/400");
    display:block;
    background-position-y:25% 
}

Ответ 3

Вы заявили, что хотите получить круговые урожаи из перебранков. Это может быть невозможно сделать с помощью 3 популярных классов начальной загрузки (img-rounded; img-circle; img-polaroid)

Вы можете написать собственный CSS-класс с использованием border-radius, где у вас больше контроля. Если вы хотите, чтобы более круговой, просто увеличивайте радиус.

.CattoBorderRadius
{
    border-radius: 25px;
}

<img class="img-responsive CattoBorderRadius" src="http://placekitten.com/g/200/200" />

Ответ 4

используйте это в css

.logo-center{
  border:inherit 8px #000000;
  -moz-border-radius-topleft: 75px;
  -moz-border-radius-topright:75px;
  -moz-border-radius-bottomleft:75px;
  -moz-border-radius-bottomright:75px;
  -webkit-border-top-left-radius:75px;
  -webkit-border-top-right-radius:75px;
  -webkit-border-bottom-left-radius:75px;
  -webkit-border-bottom-right-radius:75px;
  border-top-left-radius:75px;
  border-top-right-radius:75px;
  border-bottom-left-radius:75px;
  border-bottom-right-radius:75px;
}

<img class="logo-center"  src="NBC-Logo.png" height="60" width="60">

Ответ 5

Вы должны указать высоту и ширину этого изображения.

например. height : 200px и width : 200px также дайте border-radius:50%;

, чтобы создать круг, вы должны дать равную высоту и ширину

если вы используете bootstrap, затем укажите высоту и ширину и класс img-circle для img

Ответ 6

проблема заключается главным образом в том, что ширина должна быть равна == до высоты, а в случае bs - высота устанавливается на auto, поэтому здесь исправление для js вместо

function img_circle() {
    $('.img-circle').each(function() {
        $w = $(this).width();
        $(this).height($w);
    });
}

$(document).ready(function() {
    img_circle();
});

$(window).resize(function() {
    img_circle();
});

Ответ 7

Вам нужно взять ту же высоту и ширину

и просто используйте border-radius: 360px;

Ответ 8

Вы могли бы просто использовать загрузочную окружность.

 <img class="rounded-circle" src="http://placekitten.com/g/200/200"/>

Вы даже можете указать ширину и высоту округленного изображения, предоставив встроенный стиль для изображения, который переопределяет размер по умолчанию.

 <img class="rounded-circle" style="height:100px; width: 100px" src="http://placekitten.com/g/200/200" />