如何在 img 响应或 img 圆圈上添加边框

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

包含结果的屏幕截图