<img> within mdl-card__supporting-text not properly shown

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.