背景图像宽度和高度以适合所有媒体 - 无法使其工作

Question

我创建了一个流畅的布局（用于构建 RWD 网站），在我的设计中，有一些图像需要显示为背景图像，因为图像上方会显示文本（重叠）。

现在在“fluidLayouts.css”文件中，它显示：

img, object, embed, video { max-width: 100%;}

我已编辑为： img, 对象, 嵌入, 视频 {最大宽度：100%； 高度：自动；}

在这里我添加了“height:auto;”但是背景图像没有任何反应，我没有完全看到它，也没有重新调整大小以适应任何移动、标签或桌面媒体。

如何设置背景图像的高度以使其自动缩放到任何媒体？我在整个网站设计中使用背景图片。

Answer 1

您在这里混合了两件事：img、object、embed 和 video 是块元素，它们的行为与它们应有的一样（block 元素）。

background-image 只是应用于元素的 CSS 属性（具有由您的 CSS 布局计算的某些特定宽度和高度）但 background-image 本身没有和不能 影响元素的大小。

这里是您了解不同设置如何表现的小提琴：jsFiddle

你有两个选择。

第一个是使用常规的img标签，并使用相对定位将内容放在它上面。

第二个是使用background-image 并且要么只应用background-size: cover - 但是这不会保持图像的原始比例，或者background-size: cover 加上宽度声明（无论你喜欢什么，固定像素，100%，不没关系）并使用padding-bottom hack 将此 div 扩展到所需的纵横比。因此，如果您的图像为 500/300，则您的 padding-bottom 需要为 (300/500)*100 = 60%。