卡片中的图像答案

【问题标题】：Images in cards卡片中的图像
【发布时间】：2015-07-13 13:43:30
【问题描述】：

为什么卡片组件的图像被用作背景而不是图像来填充卡片的媒体部分？我们不能只使用图像标签吗？

我正在尝试使用 MDL 框架来制作一个 tumblr 模板但由于 tumblr 使用图片标签，因此无法为图片帖子实现卡片组件

请解释为什么 MDL 使用图像作为卡片组件的背景

【问题讨论】：

提供的示例仅使用背景图像。您可以随意插入标准的 img 标签以及任何其他媒体标签。对于通过 CSS 添加的媒体没有硬性规定。这是在示例中完成的，因为媒体不是卡片的主要部分，而是一种风格增强。

【解决方案1】：

没有什么能真正阻止您使用img 标签。以this 为例。

不过使用图片作为divs的背景有一些优势：

右击图片不能下载图片
您在响应方面具有更大的灵活性（例如，使用background-size: cover 填充div）。 更新：即使您可以将宽度/高度设置为 100% 以适应图像，cover 仍会保持纵横比并且通常会提供更好的结果。
由于您的图像只是一个背景，您无需将其位置设置为absolute 以让div 中的其他元素定位在图像上（所有MDL 示例中都是这种情况）

【讨论】：

是的，但是 tumblr 不能那样工作，我必须以某种方式为每个使用的图片帖子制作一个动态卡片类，这似乎很复杂
你正在创建一个新的 tumblr 主题吗？我似乎不明白这个问题。看到我发的代码示例了吗？
您可以将媒体元素内的媒体宽度/高度设置为 100%，以使它们大部分响应。所以第 2 点完全可以在没有 CSS 图像解决方案的情况下实现。默认情况下我们不这样做，因为它可能会改变人们放入其中的图像的比例，这并不好。