CODEWITHSUNDEEP
csstwitter-bootstrapmaterialize
mdegges
mdegges

Reputation: 963

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

Upvotes: 3

Views: 14019

Answers (2)

Roy
Roy

Reputation: 8069

Do the images really have to be inline? Or can they be set as background-image (since they are user uploaded)? If so, you can set the background-size property to cover to address the problem. Also because object-fit is not widely supported (yet).

cover

A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

Source: MDN

See this updated JSFiddle for the demo. The padding-bottom can be altered to a percentage for your needs. Try to change it and see what it does.

Inline images

If the images do have to be inline, you can apply this solution:

.card-image {
  width: 100%;
  padding-bottom: 50%;
  overflow: hidden;
  position: relative;
}

.card-image img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

The image will be pushed inside the .card-image and stretched to its width that's needed. See this JSFiddle for the demo. The padding-bottom can be altered to a percentage to your needs.

Upvotes: 5

Laugh_and_Drive
Laugh_and_Drive

Reputation: 66

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

Upvotes: 5

Related Questions