Как сделать круглую картинку с фоном с помощью CSS, SVG?

Question

У меня не получается правильно расположить картинку в родительском элементе – даже несмотря на то, что картинке заданы правильные отступы от краев родительского элемента, она продолжает вылезать.

Может быть я вообще выбираю неправильный способ реализации? Вот мой код:

* {
  padding: 0;
  margin: 0;
}

.parent_block {
  margin: 30px;
  background: #eeeeee;
  width: 195px;
  height: 195px;
  position: relative;
  border-radius: 100%;
  border: 1px solid black;
}

img {
 position: absolute;
 top: 10px;
 left: 16px;
 right: 8px;
  width: 170px;
  height: 184px;
}

<div class="parent_block">
  <img src="https://i.postimg.cc/QMsSJWR6/Photo.png" alt="photo">
</div>

Мне надо сделать вот это:

Answer 1

Решение SVG pattern

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

<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="img" patternUnits="userSpaceOnUse" width="100%" height="100%">
        <image xlink:href="https://i.postimg.cc/QMsSJWR6/Photo.png"  width="100%" height="100%" />
      </pattern>
    </defs>
      <!-- Фон -->
<circle cx="100" cy="100" r="100"  fill="#EEEEEE" />
    <!-- Изображение помещенное в круг с помощью паттерна -->
<circle cx="100" cy="100" r="100"  fill="url(#img)" />
</svg>

Answer 2

Можно просто точно позиционировать, не забывая про overflow: hidden для контейнера:

* {
  padding: 0;
  margin: 0;
}

.parent_block {
  position: relative;
  height: 195px;
  width: 195px;
  margin: 30px;
  overflow: hidden;
  border: 1px solid black;
  border-radius: 50%;
  background-color: #eeeeee;
}

img {
  position: absolute;
  bottom: -1px;
  left: 23px;
  height: 184px;
  width: 163px;
}

<div class="parent_block">
  <img src="https://i.postimg.cc/QMsSJWR6/Photo.png" alt="photo">
</div>

Если картинка не подгружается и является статичной, то можно избавиться и от тега <img>:

* {
  padding: 0;
  margin: 0;
}

.avatar {
  position: relative;
  height: 195px;
  width: 195px;
  margin: 30px;
  overflow: hidden;
  box-shadow: inset 0 0 1px 1px black;
  border-radius: 50%;
  background-color: #eeeeee;
  background-image: url('https://i.postimg.cc/QMsSJWR6/Photo.png');
  background-position: 23px bottom;
  background-repeat: no-repeat;
  transition: box-shadow .3s ease;
}
.avatar:hover {
  box-shadow: inset 1px -36px 3px 83px black;
}

<div class="avatar"></div>

На будущее: не обрезайте изображения заранее, если они должны иметь примитивные формы - это, во-первых, избавит от лишней работы в графическом редакторе (а подрезать можно средствами CSS). Во-вторых, проще будет позиционировать, ибо лишнее обрежется контейнером, но не будет этой борьбы с просветами.

Answer 3

Решение CSS

.container {
width:200px;
height:200px;
}
img {
background:#eee;
width:200px;
height:200px;
  border-radius: 50%;

<div class-"container">
<img src="https://i.postimg.cc/QMsSJWR6/Photo.png" />
</div>

Вращение при наведении

.container {
width:200px;
height:200px;
}
img {
background:#eee;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 1.2s ease-in-out;
          transition:         transform 1.2s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

<div class="container">
<img src="https://i.postimg.cc/QMsSJWR6/Photo.png" />
</div>

БЛОГ НА HUSL

Как сделать круглую картинку с фоном с помощью CSS, SVG?

Ответы (3 шт):

Решение SVG pattern

Решение CSS