Search code examples
csstwitter-bootstrapmaterialize

Creating responsive materialize cards

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).

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.

Our current display

We've been messing with this all day without getting very far. Any help is much appreciated.

HTML: 

<div class="row text-center">
  <div class="col-xs-12 col-md-4 col-sm-12 test">
    <div class="card" ui-sref='forsaleitem({type:"interior"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator" alt="Cinque Terre">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Interior</h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 col-sm-12 test">
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator" alt="Cinque Terre">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Drivetrain</h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 col-sm-12 test">
    <div class="card" ui-sref='forsaleitem({type:"performance"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" alt="Cinque Terre">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Performance</h5>
      </div>
    </div>
  </div>
</div>

CSS: 

.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;
}
Solution

  • Use Media Queries to set the width/height depending on the size of the screen. Example in JS Fiddle: https://jsfiddle.net/3yegzwex/

    HTML:

    <div class="row text-center">
  <div class="col-xs-12 col-md-4 col-sm-12">
    <div class="card" ui-sref='forsaleitem({type:"interior"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Interior</h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 col-sm-12">
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Drivetrain</h5>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 col-sm-12">
    <div class="card" ui-sref='forsaleitem({type:"performance"})'>
      <div class="card-header card-image waves-effect waves-block waves-light">
        <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
      </div>
      <div class="card-content">
        <h5 class='text-center'>Performance</h5>
      </div>
    </div>
  </div>
</div>

    CSS: 

    .card {
  text-align: center;
}

@media (max-width: 990px) {
  .resizeimg {
    height: auto;
  }
}

@media (min-width: 1000px) {
  .resizeimg {
    width: auto;
    height: 350px;
  }
}