CSS - Создание всех изображений с круглой рамкой

Question

В моем проекте я разрешаю пользователям загружать изображения профиля. Я хочу, чтобы эти картинки имели круглую рамку, как это делают картинки в Instagram. Кто-нибудь знает, как добавить этот эффект?

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

Кто-нибудь знает Как добавить круглую границу типа для любого изображения, которое загружается пользователем? Спасибо.

HTML КОД:

.fixedImage {
    position: relative;
    left: 70px;
    width: 25px;
    top: 50px;
    height: 25px;
    border-radius: 50%;
}

Answer 1

Вместо img вы можете использовать div, и ваше изображение будет в фоновом режиме. Это позволит вам добавить цвет фона по вашему выбору, чтобы избежать прозрачности.

Пример:

<div class="fixedImage" style="background-image: url(img.png)"></div>

CSS:

.fixedImage {
    position: relative;
    top: 50px;
    left: 70px;
    width: 100px;
    height: 100px;                                
    border-radius: 50%;
    background-color: #fff;
    background-size: 100px 100px;
}

Answer 2

Используйте границу и коробку-тень ...

div {
  text-align: center;
  display: inline-block;
  padding: 2em 3em;
  border: 1px solid lightgrey;
  background: lightgreen;
}

img {
  display: block;
  border-radius: 50%;
  border: 5px solid transparent;
  box-shadow: 0 0 0 5px red;
}

.white {
  border-color: white;
}

<div>
  Transparent border
  <img src="http://www.fillmurray.com/g/150/150" alt="">
</div>

<div>
  White border
  <img src="http://www.fillmurray.com/g/150/150" alt="" class="white">
</div>

Answer 3

Я думаю, https://medium.com/@biancapower / как сделать прямоугольник-изображение-круг-в-css -2f392bc9abd3 - это то, что вы ищете.

Div вокруг изображения получает border-radius: 50%

HTML:

 <div class="image-cropper">
   <img src="https://www4.lunapic.com/editor/premade/transparent.gif">
 </div>

CSS:

img {
  height: 200px;
  width: 200px;
  padding: 20px;
}

.image-cropper {
  width: 240px; // it seems you need to add the padding twice here
  border-radius: 50%;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
}

Fiddle:

https://jsfiddle.net/bdL8zmu1/

Без фона:

https://jsfiddle.net/94z27bdL/