Закругленные углы на прямоугольном изображении с использованием только CSS

Я хотел бы создать круглое изображение из прямоугольного изображения с использованием радиус-границы.

Есть ли простой способ добиться этого с помощью CSS без искажения изображения и обеспечения кругового кругооборота.

Здесь показаны неудачные попытки:

.rounded-corners-2{
    border-radius: 100px;
    height: 150px;
    width: 150px;

Можно ли это сделать только в CSS.....?

Ответ 1

Вы делаете это, добавляя родительский div к вашему img, и код выглядит следующим образом:

figure{
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
}

Обновленная демоверсия

Ответ 2

`object-fit`

img{
  width:80px;
  height:80px;
  border-radius: 50%;
  object-fit: cover;
}

<img src="http://placehold.it/800x400/0bf">

Ответ 3

Есть ли простой способ добиться этого с помощью CSS без искажения изображения и обеспечения кругового кругооборота.

Да, и вы также можете избежать использования родительских элементов, просто установив изображение в качестве фона. Вы также можете поместить изображение, как хотите, с помощью атрибута background-position.

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

setTimeout(function() {
	$("#image").css("background-image", "url(https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97350&w=150&h=350)");
}, 3000);

#image {
    display: block;
    background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150");
    border-radius: 200px;
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" />

Ответ 4

http://jsfiddle.net/o8fwpug5/37/

Это небольшое обновление предыдущего ответа. Мне понравился другой ответ, но это немного более оптимизировано и дает ширину на основе пикселя для обертки. Таким образом, легче видеть и изменять размеры в ваших собственных целях.

HTML:

<div><img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /></div>

CSS

div{
    height:200px;
    width:200px;
    position:relative;    
    border-radius:100%;
    overflow:hidden;
}
img{
    position:absolute;
    left:-50%; right:-50%; top:0;
    margin:auto;
    height:100%; width:auto;
}

Ответ 5

Поместите кадр DIV вокруг изображения: DEMO

<div class="rounded-corners">
   <img src="http://welovekaleycuoco.com/wp-content/uploads/2013/11/Kaley-Cuoco-Wallpapers-81.jpg" width="200"> 
</div>

div.rounded-corners {     
    height: 150px;
    width: 150px; 
    border-radius: 50%;
    overflow: hidden;
}

Примечание: вам больше не нужен стиль img.rounded-cornerners