0

问题 基本上，不可能以正确的方式使用带有背景图像的全尺寸照片。不同的分辨率、宽屏等。我正在寻找的是针对这个问题的 JS/PHP GD 解决方案。

技术 据我所知，它将如下。Javascript 查找可用的屏幕尺寸（浏览器窗口）或屏幕分辨率。将其解析为 PHP GD。在 FTP 上，您将获得高分辨率图像（例如 1600x1200）。PHP GD 根据 JS 解析的信息对其进行缩放。这也必须对调整大小起作用。

由于我“只是”一个简单的设计师，我缺乏 JS/PHP 让我在这个问题上丧命。

如果有人可以帮助我提供适当的解决方案，我很乐意在完成后将它们与我的新网站上的朋友链接。在此先感谢荷兰的厚爱。

菲尔

4

3 回答 3

3

基本上，不可能以正确的方式使用背景图像。

我知道这是您的意见，但网络的其余部分似乎不同意您的看法。他们让它发挥作用。但这可能不是这里的主要问题。

为每个用户调整背景大小，地狱，如果你不缓存，每个请求都会在一纳秒内摧毁你的服务器。GD 调整大小很昂贵，如果这是在共享主机上，您最终会让您的网站启动它。如果同一台服务器上还有其他站点，它们会缓慢爬行。

即使您可以将足够多的煤铲到服务器中，它也会带来非常不可靠的用户体验。浏览器不仅能够下载文件，还必须等待 PHP 生成图像，然后才能下载。

如果我在大屏幕上加载这个网站怎么办？我这里有一个可能的 ~3840*1200 分辨率。即使你不放大它，我也必须下载完整版。大屏幕尺寸并不意味着我的计算机上有多余的光纤。

但是，综上所述，这当然是可能的。我建议你从 jQuery 开始。它使挂钩到 window -load 和 -resize 事件以及动态更改 CSS 变得非常简单。可以通过几个简单的谷歌来完成细节：“php resize image”、“jquery onresize”和“jquery change background”。

于 2009-01-21T10:03:21.787 回答
0

您还可以制作几个 css 样式表来匹配某些分辨率。这个 UNTESTED 示例可能会给您一些帮助。

<html>
  <head>
    <title></title>
    <link rel="stylesheet" id="styleSwitch" href="" />

    <script  type="text/javascript">
      function getStyle(){
      var theStyleLink = document.getElementById('styleSwitch');­

     if (window.innerWidth < 810){
        theStyleLink.setAttribute("href", ­ "small-window.css");

     }
     else {
       theStyleLink.setAttribute("href", ­ "large-window.css");

       }
     }
   </script>
 </head>
 <body onload="getStyle();">

 </body>
</html>
于 2009-01-21T11:08:41.843 回答
0

你可以完全用 CSS 做到这一点..

查看包含和覆盖：https ://developer.mozilla.org/en-US/docs/Web/CSS/background-size

奖金：http: //blog.geneticcoder.com/2015/12/09/rotate-and-cross-fade-background-images-with-jquery-css-background-opacity-trick/

于 2016-02-10T19:03:51.393 回答