html - 固定所有图像的大小

Question

我正在使用 bootstrap 3 创建一个用户个人资料页面，并以 6 行(在大屏幕上)显示它们。问题是配置文件具有不同大小的图像，我试图弄清楚如何在不改变纵横比的情况下强制它们具有相同的高度和宽度(裁剪图像很好)。这是一个 fiddle

这是我目前所拥有的:

   <div class="col-sm-2 thumb">
                  <div class="card" border="1px;" style="width: 18rem;">
                  <figure class="member">
  <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Annex_-_Stewart%2C_James_%28Call_Northside_777%29_01.jpg/220px-Annex_-_Stewart%2C_James_%28Call_Northside_777%29_01.jpg" height="150" alt="Card image cap">
  <figcaption class="member-details bordered no-top-border">
                      <h3>
                        Jimmy Stewart
                        </h3>
                        <p>Actor</p>

                    </figcaption>
                     </figure>
</div>

                </div><!-- /.col -->

Answer 1

您需要使用overflow: hidden 样式。这是您的图像如何保留在 div 元素中的示例:

https://jsfiddle.net/ajpofdzr/6/