使用引导网格系统使图像大小相同

Question

如何使用引导网格系统将我的数据库从同一高度接收到的图像，所以我可以举例说明1行2 img肖像和1个风景？

的index.html

    <div class="container">
<div class="row d-flex">
    <% let portrait = 'col-lg-2 col-md-2 col-sm-2 col-xs-12';
    let landscape = 'col-lg-4 col-md-4 col-sm-4 col-xs-12';%>
    <% gallery.forEach(function (image) { %>

    <% if (image.format === 'portrait') { %>
    <div class="<%= portrait%>" style="padding: 5px">
        <a class="" href="/gallery/#<%= image.imageName %>">
            <img src="<%= image.path + image.imageName %>" alt="<%= image.imageName %>" class="img-responsive"/>
        </a>
    </div>
    <% } else if (image.format === 'landscape') { %>
   <div class="<%=landscape%>" style="padding: 5px">
       <a class="" href="/gallery/#<%= image.imageName %>">
           <img src="<%= image.path + image.imageName %>" alt="<%= image.imageName %>" class="img-responsive"/>
       </a>
   </div>
    <% } %>

的style.css

.d-flex {
    display: flex;
    flex-flow: wrap;
}

.d-flex > [class ^= "col-lg"] {
    display: flex;
}

img {
    object-fit: cover;
}

输出：

我需要将风景照片设置为与人像相同的高度

Answer 1

你也可以使用img {height：100％;最大高度：100％;宽度：汽车;} 它将设置所有图像的高度相等。

Answer 2

试试这个：

检查演示 HERE

HTML：

<div class="container">
  <div class="row d-flex">
    <div class="col-sm-3">
      <img class="img-responsive" src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&s=9ebf86cdab3a1c7319ff15b16d09b1f7&auto=format&fit=crop&w=750&q=80" alt="">
    </div>
    <div class="col-sm-3">
      <img class="img-responsive" src="https://images.unsplash.com/photo-1472653525502-fc569e405a74?ixlib=rb-0.3.5&s=3c19e4553dd56ab02a6674ef2c649474&auto=format&fit=crop&w=750&q=80" alt="">
    </div>
    <div class="col-sm-6">
      <img class="img-responsive" src="https://images.unsplash.com/photo-1423483641154-5411ec9c0ddf?ixlib=rb-0.3.5&s=0649227cc8b0717bed784c53c7fdc070&auto=format&fit=crop&w=750&q=80" alt="">
    </div>
  </div>
</div>

CSS：

.d-flex {
  display: flex;
  flex-flow: wrap;
}
.d-flex > [class ^= "col-sm"] {
  display: flex;
}
img {
  object-fit: cover;
}