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

Question

我正在尝试在 mdl-card__supporting-text 中使用 <img>，但如果图像比卡片大，图像将无法缩放以适合卡片的支持文本区域。例如，参见 codepen。看看图片的右侧是如何被遮盖的。

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

Answer 1

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

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

但是如果您要的不仅仅是这张图片，您应该考虑为此使用 class。

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

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

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

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

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

css

material-design-lite