在引导网格中使图像大小相同

Question

我正在使用 Bootstrap 网格系统创建一个包含 3 行的图片库，每行包含 3 张图像。所有的图像都有不同的大小。我想要做的是使所有图像的大小相同。我尝试在我的 CSS 中使用 max-height 或 max-width，但是它无助于使所有图像（缩略图）的大小相似。我应该摆脱缩略图类还是有其他解决方案？

 body {
      padding-top: 70px;}
    .row .flex {
     display: inline-flex;
     width: 100%;}
    img {
     width:100%;
     min-height:100px;}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row match-to-row">
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/eKTUtA74uN0" alt="">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/x-tbVqkfQCU" alt="">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/cjpGSEkXfwM" alt="">
        </div>
      </div>

      <div class="row match-to-row">
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/63JKK67yGUE" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/YP6lDrlxWYQ" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/NqE8Ral8eCE" alt="">
          </div>
        </div>

        <div class="row flex match-to-row">
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/6oUsyeYXgTg" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/WF2lvywxdMM" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/2FdIvx7sy3U" alt="">
            </div>
          </div>
    </div>
  </div>

原文由 Jacob Murin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您正在寻找的房产是 object-fit

 img {
    width: 200px; /* You can set the dimensions to whatever you want */
    height: 200px;
    object-fit: cover;
}

object-fit 属性的工作方式类似于您在背景图像上使用 background-size: cover 以使其填充页面而不拉伸的方式。这样，您可以在所有图像都遵循的规则中定义宽度，以确保它们大小相同而不会扭曲您的图片。

您可以与此属性一起使用的其他值包括：

• fill 拉伸图像。
• contain 保留图像的纵横比。
• cover - 填充框的高度和宽度。
• none - 保持原来的大小。
• scale-down - 比较none和contain之间的差异以找到最小的对象大小。

适合对象 | CSS 技巧

原文由 natejms 发布，翻译遵循 CC BY-SA 3.0 许可协议