如何使我的响应引导图像完美圆形?

Question

我想让我的图像完美的圆形和响应。我使用Bootstrap 4的类rounded-circle与img-fluid，但图像是椭圆形，而不是圆形。图片将由用户上传，所以它们不会(总是)被平方。

.nh-service-card img {
object-fit: cover;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row">
<div class="col-4 nh-service-card-img">
<img src="https://via.placeholder.com/728x90.png" alt="Reebit" class="img-fluid rounded-circle" width="85" height="85">
</div>
</div>

Answer 1

你的代码有几个问题:

1. object-fit只有在为被替换的元素定义明确的高度时才有效
2. 你的类名是不正确的:在你的标记你有nh-service-card-img，但在你的选择器你有nh-service-card

我的解决方案取决于您可以修改DOM以在图像周围添加额外的包装器<div>的需求。

方案1:aspect-ratio: 1

最现代的方法是简单地在换行元素上设置aspect-ratio: 1。aspect-ratio属性的支持相对较好，特别是在现代常绿浏览器中。

.image-wrapper {
aspect-ratio: 1;
}
.nh-service-card-img img {
object-fit: cover;
width: 100%;
height: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row">
<div class="col-4 nh-service-card-img">
<div class="image-wrapper">
<img src="https://via.placeholder.com/728x90.png" alt="Reebit" class="rounded-circle" width="85" height="85">
</div>
</div>
</div>

解决方案2:padding-bottom: 100%强制方形宽高比

或者，如果你想支持旧的浏览器，使用padding-bottom技巧:

.image-wrapper {
padding-bottom: 100%;
position: relative;
}
.nh-service-card-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row">
<div class="col-4 nh-service-card-img">
<div class="image-wrapper">
<img src="https://via.placeholder.com/728x90.png" alt="Reebit" class="rounded-circle" width="85" height="85">
</div>
</div>
</div>