Как отображать изображение профиля пользователя в круге?

Я разрабатываю сайт, где изображение профиля пользователя должно отображаться по кругу. На этом сайте много кругов, и размер круга может меняться.

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

Мне нужно отобразить изображение по кругу с приведенными ниже критериями:

Предположим, что размер изображения 500x300. Изображение должно обрезать 100 пикселей с правой и левой сторон, чтобы отображался центр изображения. Теперь изображение должно быть 300x300 с центром. Затем мне нужно сделать круг из этого изображения. ИЛИ спрятать 100 пикселей справа и слева от изображения с помощью CSS.
Если размер изображения 300x500, верхняя и нижняя области должны быть скрыты с помощью CSS

Что мне нужно сделать, чтобы исправить это? Только ответы на CSS лучше всего подходят для меня, если это возможно.

Ответы

Ответ 1

`background-size`

Поскольку размеры изображения являются переменными, вы должны убедиться, что они cover div, а также center ed внутри него.

Добавление border-radius: 50%; даст вам эффект круга.

.user {
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.one {
  background-image: url('http://placehold.it/400x200');
}

.two {
  background-image: url('http://placehold.it/200x200');
}

.three {
  background-image: url('http://placehold.it/200x400');
}

<div class="user one">
</div>

<div class="user two">
</div>

<div class="user three">
</div>

Ответ 2

установите изображение как фон, центрированный.

<div class="image"></div>

CSS

.image{
  width: 300px;
  height: 300px;
  border-radius: 50%; /*don't forget prefixes*/
  background-image: url("path/to/image");
  background-position: center center;
  /* as mentioned by Vad: */
  background-size: cover;
}

fiddle

Ответ 3

<html>  
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;  
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>