如何在 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>

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;
}

Screenshot with the result

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

How to add border on img-responsive or img-circle

html

css

twitter-bootstrap-3