title: Creating responsive materialize cards
body: <p>We're using materialize cards to display images on our site. The images are user uploaded, so they come in all different sizes (though they have to be greater than 250px). </p>
  
  <p>We're able to maintain the aspect ratio of the images, which is great, but we don't know how to do that while making the cards on each row the same height. That's our goal- to get the cards to be the same height (in a responsive way) while maintaining the aspect ratio of the images inside the cards. </p>
  
  <p><a href="https://i.stack.imgur.com/9SOB8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9SOB8.jpg" alt="Our current display"></a></p>
  
  <p>We've been messing with this all day without getting very far. Any help is much appreciated. </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="row text-center"&gt;
    &lt;div class="col-xs-12 col-md-4 col-sm-12 test"&gt;
      &lt;div class="card" ui-sref='forsaleitem({type:"interior"})'&gt;
        &lt;div class="card-header card-image waves-effect waves-block waves-light"&gt;
          &lt;img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator" alt="Cinque Terre"&gt;
        &lt;/div&gt;
        &lt;div class="card-content"&gt;
          &lt;h5 class='text-center'&gt;Interior&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-12 col-md-4 col-sm-12 test"&gt;
      &lt;div class="card" ui-sref='forsaleitem({type:"drivetrain"})'&gt;
        &lt;div class="card-header card-image waves-effect waves-block waves-light"&gt;
          &lt;img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator" alt="Cinque Terre"&gt;
        &lt;/div&gt;
        &lt;div class="card-content"&gt;
          &lt;h5 class='text-center'&gt;Drivetrain&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-12 col-md-4 col-sm-12 test"&gt;
      &lt;div class="card" ui-sref='forsaleitem({type:"performance"})'&gt;
        &lt;div class="card-header card-image waves-effect waves-block waves-light"&gt;
          &lt;img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" alt="Cinque Terre"&gt;
        &lt;/div&gt;
        &lt;div class="card-content"&gt;
          &lt;h5 class='text-center'&gt;Performance&lt;/h5&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.card {
    position: relative;
    background-color: #f4f4f4;
    // margin: 10px auto;
    height: 100%;
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.7);
  }
  
  .card {
    height: 100%;
  }
  
  .card .card-image img {
    //object-fit: contain !important;
  }
  </code></pre>