我正在创建一个具有这种结构的网站:
其中红色框代表用户的浏览器窗口。当用户单击主页(底部)上的按钮时，它会向上滑动到新场景(例如平流层)。每个场景都是一个完整的图像。现在的问题是，我需要考虑使用不同屏幕尺寸的用户以及他们调整窗口大小时的情况。我已经查找了使用 CSS 或 JavaScript 调整背景图像大小的方法，但这对我来说效果不佳。我需要找到一些方法让它们都适合使用不同屏幕尺寸的每个人。我有一个想法——我知道这听起来很笨拙，但是编写一个 PHP 脚本将图像大小调整为 JS 给定的尺寸是否可行？ JS 找到浏览器窗口的大小，交给 PHP，PHP 返回 JS 需要的图像。当用户调整浏览器窗口大小时也会发生这种情况......
我该怎么做？
更新:
我试过 SVG，效果很好。但现在我想知道如何让其他元素与 SVG 一致？
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<!-- Date: 2012-08-01 -->
<style type="text/css" media="screen">
body { margin: 0px; }
.area { border: 3px solid red; background: green; margin-bottom: 0px; background: url(http://www.alistapart.com/d/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii/beetle.svg) no-repeat; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
function scroll_to(id, speed, margin) {
$('html, body').animate({
scrollTop: $('#' + id).offset().top - margin
}, speed);
}
var slide = 'a3'
$(".area").height($(window).height());
$(window).resize(function() {
$(".area").height($(window).height());
$(".area").width($(window).width());
scroll_to(slide, 1, 0);
});
scroll_to('a2', 'slow', 0);
});
</script>
</head>
<body>
<div class="area" id="a3">
<h1>scene 3</h1>
</div>
<div class="area" id="a2">
<h1>scene 2</h1>
<div style="height: 100px; border: 1px solid black;" id="text">
hi
</div>
</div>
<div class="area" id="a1">
<h1>scene 1</h1>
</div>
</body>
</html>
最佳答案
为什么不使用 SVG 作为背景图像？您的场景看起来相当简单。
除 IE ≤ 8 以外的所有浏览器都理解 background: url(some.svg): http://caniuse.com/svg-css
关于javascript - 调整背景图像大小的替代方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11768786/