动态背景图片 PHP GD

发布于 2024-07-13 07:32:58 字数 421 浏览 6 评论 0原文

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

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

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

如果有人可以帮助我找到适当的解决方案，我很乐意在完成后在我的新网站上将他们添加为朋友链接。预先感谢荷兰的厚爱。

菲尔

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

全部不再 2024-07-20 07:32:58

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

我知道这是你的观点，但网络上的其他人似乎不同意你的观点。他们让它发挥作用。但这可能不是这里的主要问题。

为每个用户调整背景大小，如果你不缓存的话，每个请求都会在一纳秒内摧毁你的服务器。 GD 调整大小的成本很高，如果这是在共享主机上，您最终会被踢掉您的网站。如果同一服务器上还有其他网站，它们的速度就会慢得像爬行一样。

即使你可以向服务器中铲入足够的煤炭，它也会带来相当危险的用户体验。浏览器不仅能够下载文件，还必须等待 PHP 生成图像，然后才能下载。

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

但是，尽管如此，这当然是可能的。我建议您从 jQuery 开始。它使得挂钩 window -load 和 -resize 事件并动态更改 CSS 变得非常简单。可以通过一些简单的谷歌来完成具体的细节：“php resize image”，“jquery onresize”和“jquery change background”。

回复收藏 0 原文

赢得她心 2024-07-20 07:32:58

您还可以制作多个 CSS 样式表来匹配某些分辨率。这个未经测试的例子可能会给你一些帮助。

<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>

You also can make several css style sheet to match some resolutions. this UNTESTED example may give you some help.

<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>

回复收藏 0 原文