Question

我正在创建一个具有这种结构的网站：

红色框表示用户的浏览器窗口。当用户单击主页（底部）上的按钮时，它会滑动到新场景（例如，平流层）。每个场景都是整个图像。现在的问题是，我需要考虑使用不同屏幕尺寸的用户以及他们调整窗口大小的时间。我已经找到了使用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>

Answer 1

为什么不使用SVG作为背景图像？你的场景看起来很简单。

所有浏览器，但IE≤8理解background: url(some.svg)：http://caniuse.com/svg-css

Answer 2

使用一个大的background-image。设置如下：

html, body {
    margin: 0;
    padding: 0;
    width: 100%
}
body {
    position: absolute;
    bottom: 0;
    height: 2000px;
    background-image: url('background.png')
}

然后使用JavaScript将bottom的{{1}}属性设置为向上移动，如下所示：

body

Answer 3

我担心重新调整背景图片的大小是你最好的选择。你为什么不发布你已经尝试过这种解决方案的代码，其他人可以从这个角度帮助你。

Answer 4

你绝对应该将图像分成多个图像，每个图像一个。

我就是这样做的：http://jsfiddle.net/4CwdX/3/

您无需调整图像大小。浏览器可以background-size: 100%自动为您拉伸它。

调整背景图像大小的替代方法

4 个答案: