html - 如何在 img-responsive 或 img-circle 上添加边框

Question

我有一张尺寸为 450x450 的图片，它会自动调整大小，因为使用了 img-responsive 和 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>