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

Question

Как сверстать такую адаптивную рамку, чтобы сквозь прозрачный круг было видно картинку? Спасибо!

Answer 1

Вариант 1

.round {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 200px;
    height: 200px;
    overflow: hidden;
    background-color: red;
    border-radius: 50%;
    padding: 3px;
}

.round img {
    box-sizing: border-box;
    border-radius: 50%;
    width: 80%;
    height: auto;
    display: block
}

<div class="round">
    <img src="https://greendestinations.org/wp-content/uploads/2019/05/avatar-exemple.jpg" alt="">
</div>

Вариант 2

.round1 {
    box-sizing: border-box;
    align-items: center;
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 30px 3px 30px 42px;
    border-radius: 50%;
}

.round1 img {
    box-sizing: border-box;
    border-radius: 50%;
    width: 100%;
    height: auto;
    display: block
}

<div class="round1">
    <img src="https://greendestinations.org/wp-content/uploads/2019/05/avatar-exemple.jpg" alt="">
</div>

Можно и с границей в том же ключе. Но вот зачем если можно фоном )

Если же нужна именно дырка, то вот так можно. Сама дыра делается с помощью тени

.round2 {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    position: relative;
    border-radius: 50%;
    overflow: hidden
}

.round2 img {
    display: block;
    max-width: 100%;
    height: auto
}

.round2:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 50%;
    top: 13%;
    left: 23%;
    width: 74%;
    height: 74%;
    box-shadow: 0 0 0 1000px #000
}

<div class="round2">
    <img src="https://greendestinations.org/wp-content/uploads/2019/05/avatar-exemple.jpg" alt="">
</div>

Answer 2

можно бэкграундом:

.ava {
  background: 
radial-gradient(circle at 66% 50%, #0000 40%, steelblue 41%), 
url(https://picsum.photos/150);
  height:150px;
  width:150px;
  border-radius:50%;
}

  <div class="ava"></div>

БЛОГ НА HUSL

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

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