css - <img> 中的 mdl-card__supporting-text 未正确显示

Question

我正在尝试使用 <img>在 mdl-card__supporting-text 内但如果图像大于卡片，则图像不会缩放以适合卡片的支持文本区域。查看codepen例如。查看图像的右侧是如何被遮盖的。

我不是 css 和 mdl 方面的专家。我也曾尝试寻找一种解决方案，但没有找到可行的解决方案。如果有人有想法，如果您能伸出援手，我将不胜感激。谢谢。

Answer 1

对我来说，这个简单的片段很有效:

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

但是，如果您要拥有的不仅仅是这张图片，您应该考虑为此使用一个类。

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

为了更好地了解您应该使用 div 上的 .mdl-card__media 类作为容器，如果您尝试制作这样的布局。

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