Question

我想在我的Bootstrap团队部分中显示一排三个大小相等的圆圈。相反，根据地面实况图像，圆圈目前的大小不同，这意味着圆圈下方的文字（个人资料图片）也不是从网页上的同一行开始。

我知道我可以做些什么来确保圆圈的大小始终完全相同并根据显示进行调整？

Answer 1

你可以确保所有图像的宽度和高度都与开始相同，然后它看起来就像这样（没有额外的css）

OR

你必须通过css

使它们具有相同的大小

.team-member img {
   width: 330px;
   height: 330px;
}

当您调整屏幕大小时，您必须通过媒体查询调整高度并使其与宽度相同

例如（在中等大小的屏幕中，宽度将为220px，因此：

/* md */
@media (min-width: 992px) and (max-width: 1199px) {
     .team-member img {
        height: 220px;
    }
}