1

我正在创建一个具有多个图像层的新 HTML5 页面。第一层是背景层，它是全屏图像（与屏幕大小成正比）。

第二层是另一个图像对象，我希望它处于与第一层成比例的固定位置；所以如果我改变浏览器的大小，两张图片都会改变大小，所以它们彼此成比例。

有谁知道我该怎么做？

4

1 回答 1

2

所以，假设我们有一个“sky.jpg”背景图像和一个“sun.png”图像在它上面。

这是 HTML(5) 代码：

<div id="sky">
<img src="sun.png" id="sun">
</div>

这是响应式 CSS：

#sky {
    width:100%; /* width in percentage, so it will adapt to user's screen */
    height:600px; /* here i've set a fixed height, but maybe it's not what you want */
    background:url(sky.jpg) top center no-repeat;
    text-align:center; /* #sun will be centered, not sure it's what you need */
    background-size:cover;
    -moz-background-size:cover;
}
#sun {
    width:15%; /* adjust it to the needed ratio */
    max-width:300px; /* max-width will prevent it from being bigger than the original image */
    min-width:20px; /* min-width is optional */
}

现场演示（调整窗口大小）

注意background-size属性设置为cover（更多信息here）。

这意味着纵横比将保持为最小尺寸，使其宽度和高度都可以完全覆盖背景定位区域。

这就是为什么您需要比大多数分辨率更大的图像（如果它是身体背景图像）。

此属性的其他可能值是“包含”和“自动”（查看规范）。

background-size:cover;IE8不支持（这就是我们仍然添加top center背景定位的原因），对于某些 FF 版本，您需要供应商前缀 ( -moz-)

现在您可以为#sun 设置百分比宽度，以便它与包含的 div 保持比例。为了防止它变得比原始大小大，您可以设置 a max-width（最后是 a min-width）。

图像的高度将在现代浏览器中自动调整。

如果您不想在#sky 上固定高度，请确保其容器的高度也不同于 auto（默认值）。

例如，如果#sky 是您的页面背景图片，您必须设置：

html, body { height:100%; }
#sky { height:100%; }
于 2012-09-23T13:01:24.217 回答