CSS Круговое обрезание изображения прямоугольника

Я хочу сделать круговое изображение по центру из прямоугольной фотографии. Размеры фотографий неизвестны. Обычно это прямоугольная форма. Я пробовал много методов:

CSS

.image-cropper {
max-width: 100px;
height: auto;
position: relative;
overflow: hidden;
}

.image-cropper img{
    display: block;
  margin: 0 auto;
  height: auto;
   width: 150%; 
  margin: 0 0 0 -20%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;  
}

HTML:

<div class="image-cropper">
<img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" />
</div>

Ответы

Ответ 1

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

Это будет работать:

HTML

<div class="image-cropper">
    <img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" />
</div>

CSS

.image-cropper {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

И рабочая скрипка здесь

Ответ 2

Попробуйте следующее:

img {
    height: auto;
    width: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

DEMO здесь.

ИЛИ

.rounded {
    height: 100px;
    width: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background:url("http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg") center no-repeat;
    background-size:cover;
}

DEMO здесь.

Ответ 3

Если вы можете жить без тега <img>, я предлагаю вам использовать фотографию в качестве фонового изображения.

.cropcircle{
    width: 250px;
    height: 250px;
    border-radius: 100%;
    background: #eee no-repeat center;
    background-size: cover;
}

#image1{
    background-image: url(http://www.voont.com/files/images/edit/7-ridiculous-ways-boost-self-esteem/happy.jpg);
}

<div id="image1" class="cropcircle"></div>

Ответ 4

Решение Johnny - это хорошо. Я обнаружил, что добавление min-width: 100%, действительно помогает изображениям заполнить весь круг. Вы можете сделать это с помощью комбинации JavaScript для получения оптимальных результатов или использовать ImageMagick - http://www.imagemagick.org/script/index.php, если вы действительно серьезно настроитесь на правильное решение.

.image-cropper {

  width: 35px;

  height: 35px;

  position: relative;

  overflow: hidden;

  border-radius: 50%;

}

.image-cropper__image {

  display: inline;

  margin: 0 auto;

  height: 100%;

  min-width: 100%;

}

<div class="image-cropper">
  <img src="#" class="image-cropper__image">
</div>

Ответ 5

Для этого вам нужно использовать jQuery. Этот подход дает вам возможность иметь динамические изображения и делать их круглыми независимо от размера.

У моей демонстрации есть один недостаток прямо сейчас, я не центрирую изображение в контейнере, но плохо возвращаюсь к нему через минуту (нужно закончить script, над которым я работаю).

DEMO

<div class="container">
    <img src="" class="image" alt="lambo" />
</div>

//script
var container = $('.container'),
    image = container.find('img');

container.width(image.height());


//css    
.container {
    height: auto;
    overflow: hidden;
    border-radius: 50%;    
}

.image {
    height: 100%;    
    display: block;    
}