0

I'm trying to use <img> within mdl-card__supporting-text but if the image is bigger than the card, the image would not scaled to fit within the card's supporting text area. See the codepen for example. See how the right side of the image is covered up.

I'm not expert in css and mdl. I have also tried to search for a solution and didn't quite find one that would work. If anyone has an idea, I would really appreciate if you could give a helping hand. Thanks.

Sam
  • 1,288
  • 1
  • 13
  • 22

1 Answers1

2

For me this simple snippet worked:

img {
height: auto;
width: 100%;
}

But if you will have more than just this image, you should consider using a class for this.

.card-img {
height: auto;
width: 100%;
}

And for better overview you should use the .mdl-card__media class on a div as the container, if you are trying to make a layout like this.

<div class="mdl-card mdl-shadow--2dp demo-card-square">
      <div class="mdl-card__media">
          <img src="http://placehold.it/400x300">
      </div>
      <div class="mdl-card__supporting-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Aenan convallis.
      </div>
      <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
              View Updates
          </a>
      </div>
  </div>
QBolt
  • 63
  • 4