Создайте аватар круга из изображения прямоугольника, сохраняя пропорции и просто используя центр изображения

У меня есть изображения шириной 480 пикселей и высотой 640 пикселей.

Я хочу показать их в виде кругов на веб-странице 150px, используя CSS. Но я хочу увидеть центр изображения.

Итак, возьмите 80 пикселей сверху и снизу исходного изображения, создайте квадрат с изображением, которое я хочу увидеть. Затем я хочу сделать это в круг.

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

Может ли кто-нибудь помочь

Ответы

Ответ 1

Вы можете установить изображение в качестве фона элемента, установить его размер фона на cover, а затем использовать радиус границы для округления границ.

#avatar {
    /* This image is 687 wide by 1024 tall, similar to your aspect ratio */
    background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
    
    /* make a square container */
    width: 150px;
    height: 150px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: top center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}

<div id="avatar"></div>

Ответ 2

Если изображение должно быть в HTML, а не в фоновом изображении

.wrapper {
  width:150px;
  height:150px;
  margin: 25px auto;
  overflow: hidden;
  border-radius:50%;
  position: relative;
}

.wrapper img {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%)
}

<div class="wrapper">
  <img src="http://lorempixel.com/image_output/nightlife-q-c-640-480-3.jpg" alt="" />
</div>

Ответ 3

Другое решение - установить размеры для img и использовать "object-fit: cover;". Он будет делать то же самое, что и "background-size: cover", не вступая в фоновые изображения.

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

Ответ 4

Другим решением является простой класс css для элемента img:

.avatar {

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
}

Использование:

<img class="avatar" src="http://path.to/image.jpg" />

Ответ 5

#avatar {
    /* This image is 687 wide by 1024 tall, similar to your aspect ratio */
    background-image: url('http://imgur.com/a/eoiBH');
    
    /* make a square container */
    width: 150px;
    height: 150px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}

<div id="avatar"></div>