title: multiple responsive Image fit into single div with css
body: <p><a href="https://i.stack.imgur.com/yP264.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yP264.jpg" alt="enter image description here"></a><br>
  I want to create this type of structure with images. I'm using bootstrap, is it possible to create this type of layout with bootstrap,if not then how?</p>
  
  <p>here is the sample code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.side_padding { padding-left: 2.5%; padding-right: 2.5%; }
  .img_holder { object-fit: fill; width: 90%; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;div class="selection"&gt; 
              &lt;div class="container"&gt;
                  &lt;div class="row side_padding"&gt;
                      &lt;div class="col-sm-5"&gt;
                          &lt;div class="img_holder banner"&gt;&lt;img src="images/img1.jpg" class="img-responsive" alt=""/&gt;&lt;/div&gt;
                          &lt;div class="img_holder banner"&gt;&lt;img src="images/img2.jpg" class="img-responsive" alt=""/&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-3 center-block"&gt;
                          &lt;div class="img_holder banner"&gt;&lt;img src="images/img3.jpg" class="img-responsive" alt=""/&gt;&lt;/div&gt;
                          &lt;div class="img_holder banner"&gt;&lt;img src="images/img4.jpg" class="img-responsive" alt=""/&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-4"&gt;
                          &lt;div class="img_holder banner"&gt;&lt;img src="images/img5.jpg" class="img-responsive" alt=""/&gt;&lt;/div&gt;
                          &lt;div class="img_holder banner"&gt;&lt;img src="images/img6.jpg" class="img-responsive" alt=""/&gt;&lt;/div&gt;
                          &lt;div class="img_holder banner"&gt;&lt;img src="images/img7.jpg" class="img-responsive" alt=""/&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>