Question

我正在创建一个包含多个图片图层的新HTML5页面。第一层是背景层，它是全屏图像（与屏幕尺寸成比例）。

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

有谁知道我该怎么办？

Answer 1

所以，我们假设我们有一个“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 */
}

Live demo（调整窗口大小）

请注意background-size属性设置为cover（more info here）。

这意味着将保留纵横比to the smallest size such that both its width and its height can completely cover the background positioning area。

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

此属性的其他可能值为“contains”和“auto”（have a look at the specs）。

background-size:cover;是not supported by IE8（这就是为什么我们仍然为后台定位添加top center），对于某些FF版本，您需要供应商前缀（-moz-）

现在你可以为#sun设置一个百分比宽度，这样就可以保持与包含div的比例。为防止它变得比原始尺寸大，您可以设置max-width（最终为min-width）。

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

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

例如，如果#sky是您的页面背景图片，则您需要设置：

html, body { height:100%; }
#sky { height:100%; }

如何按比例调整多个图像的大小？

1 个答案: