title: Make image same size using also bootstrap grid system
body: <p>how can i make the images received from my database at the same height using also the bootstrap grid system so i can put for example on 1 row 2 img portrait and 1 landscape?</p>
  
  <p>index.html</p>
  
  <pre><code>    &lt;div class="container"&gt;
  &lt;div class="row d-flex"&gt;
      &lt;% 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';%&gt;
      &lt;% gallery.forEach(function (image) { %&gt;
  
      &lt;% if (image.format === 'portrait') { %&gt;
      &lt;div class="&lt;%= portrait%&gt;" style="padding: 5px"&gt;
          &lt;a class="" href="/gallery/#&lt;%= image.imageName %&gt;"&gt;
              &lt;img src="&lt;%= image.path + image.imageName %&gt;" alt="&lt;%= image.imageName %&gt;" class="img-responsive"/&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;% } else if (image.format === 'landscape') { %&gt;
     &lt;div class="&lt;%=landscape%&gt;" style="padding: 5px"&gt;
         &lt;a class="" href="/gallery/#&lt;%= image.imageName %&gt;"&gt;
             &lt;img src="&lt;%= image.path + image.imageName %&gt;" alt="&lt;%= image.imageName %&gt;" class="img-responsive"/&gt;
         &lt;/a&gt;
     &lt;/div&gt;
      &lt;% } %&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>.d-flex {
      display: flex;
      flex-flow: wrap;
  }
  
  .d-flex &gt; [class ^= "col-lg"] {
      display: flex;
  }
  
  img {
      object-fit: cover;
  }
  </code></pre>
  
  <p>output:
  <a href="https://i.stack.imgur.com/wLgxn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wLgxn.jpg" alt="enter image description here"></a></p>
  
  <p>i need to make the landscape picture at the same height as the portrait</p>