修复所有图像的大小答案

【问题标题】：Fix the size of all images修复所有图像的大小
【发布时间】：2023-03-22 02:01:02
【问题描述】：

我正在使用 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 -->

【问题讨论】：

为了让所有图像大小相同，我创建了一个具有固定高度和/或宽度的 div，然后将图像设置为背景图像。使用 background-size:cover 通常可以解决任何空白问题。
很多不同的方法可以做到这一点，所以这真的取决于你的需要！我会选择使用背景图像的 Ginger Squirrel 解决方案......如果图像最终是动态的，这可能更多或一个问题 - jsfiddle.net/srdo03oj/3

标签： html css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这可以通过object-fit: cover; 轻松完成，但此功能is not supported by IE/Edge。如果需要 IE 支持，可以尝试使用background-size: cover;，至少是supported by the latest IE。

这是一个有效的jsfiddle with both solutions。

【讨论】：

【解决方案3】：

这可能会有所帮助：Centre crop thumbnails with CSS

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

【讨论】：