title: Custom Grid with Images
body: <p>So I have used libraries like Bootstrap3 as I am learning web development, but I want to further my knowledge in web dev by fully understanding and being able to recreate some things that are available in bootstrap.  I'm currently messing around with a custom grid and putting images into it that will remain responsive.  The problem is that I want the images to all be at one height no matter what the size of the images are in my row.  The width for the images is exactly what I thought, but I can't get the height to be the same (or at least cut off any excess images.  This is my <a href="https://codepen.io/Kotsenburg/pen/jwoVWw" rel="nofollow noreferrer">Custom Grid CodePen</a> that I am working on.  I have already googled answers but a lot of answers to questions are using <code>background-image</code> properties which I am not using, any help would be greatly appreciated.  Thanks!</p>
  
  <p><strong>Edit:</strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-4"&gt;
        &lt;img class="responsiveImage" src="https://source.unsplash.com/M8spMIQcg24"&gt;
      &lt;/div&gt;
      &lt;div class="col-4"&gt;
        &lt;img class="responsiveImage" src="https://source.unsplash.com/U--hvQ5MKjY"&gt;
      &lt;/div&gt;
      &lt;div class="col-4"&gt;
        &lt;img class="responsiveImage" src="https://source.unsplash.com/F3ePNdQb_Lg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.row {
    position: relative;
    min-width: 100%;
  }
  
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  
  [class*="col-"] {
      float: left;
  }
  
  .responsiveImage {
    max-width: 100%;
    height: auto;
    padding-top: 30%;
  }
  </code></pre>