Как добавить границу на img-отзывчивый или img-circle

Question

У меня есть изображение размером 450x450, размер которого автоматически изменяется из-за использования img-отзывчивого и img-circle. Проблема в том, что граница радиуса всегда пытается ограничить исходный размер (450x450).

.img-circle {  
  border-radius:50%;
  border: 10px solid red;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


<div class="col-md-2 col-sm-3 col-xs-6">

   <img src="https://via.placeholder.com/450x450" class="img-responsive img-circle pad-img" alt="" />
</div>
<div class="col-md-2 col-sm-3 col-xs-6">

   <img src="https://via.placeholder.com/450x450" class="img-responsive img-circle pad-img" alt="" />
</div>
<div class="col-md-2 col-sm-3 col-xs-6">

   <img src="https://via.placeholder.com/450x450" class="img-responsive img-circle pad-img" alt="" />
</div>

фактический результат такой: http://prntscr.com/pji0u1

Answer 1

Вы требовали заполнения. если вы не хотите, то вы можете добавить дополнение 0 поможет. Попробуйте это.

.img-circle {
  border-radius: 50%;
  border: 10px solid red;
  padding: 20px;
//padding: 0px //if you don't want padding.
}

<div class="col-md-2 col-sm-3 col-xs-6">

  <img src="https://dummyimage.com/400x400/000/fff" class="img-responsive img-circle pad-img" alt="" />
</div>

Answer 2

Можно явно указать размер картинки и после рисования границы. Я добавил код HTML и CSS:

HTML:

<div class="col-md-2 col-sm-3 col-xs-6">
   <img src="https://images.pexels.com/photos/2916450/pexels-photo-2916450.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="img-responsive img-circle pad-img" alt="" />
</div>

Css:

body {
  background-color: gray;
}


.img-circle {
  border: 10px solid white;
  border-radius: 100%;
}

.pad-img {
  image: cover;
  width: 450px;
  height: 450px;
}

Снимок экрана с результатом