根据屏幕分辨率调用不同的随机图像集：PHP？

Question

我有一个加载随机全屏背景图像的主页，但是由于（我认为）所调用图像的大小，导致在移动设备上出现渲染问题。

我正在使用PHP脚本调用图像，如果屏幕宽度小于1080px，是否可以让PHP调用另一组图像？

这是页面： http : //agentboris.com/

html文件中html之前的PHP：

<?php
  $bg = array('bg-01.gif', 'bg-02.gif', 'bg-03.gif', 'bg-04.gif', 'bg-05.gif', 'bg-06.gif', 'bg-07.gif', 'bg-08.gif', 'bg-09.gif', 'bg-10.gif', 'bg-11.gif', ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

以及实现它的CSS样式（我认为！）：

<style type="text/css">
<!--
body{
background: url(backgrounds/<?php echo $selectedBg;?>) no-repeat center center fixed;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
-->
</style>

谢谢你的帮助。

Answer 1

您可以使用javascript / jQuery来做到这一点：

图片名称为：
img-XY.gif
X：相对于分辨率的数字，例如8将代表800px左右的宽度
Y：每种分辨率的图像数量（示例中为0、1、2、3 ...最多9个）

<script>
var w = $( window ).width();
image = "img-" + Math.floor(w/100) + "-" + Math.floor(Math.random() * 10) + ".gif";
$('body').css("background-image", "url('/imagePath/" + image + "')");  
</script>

因此，您将需要一些类似的东西：

/imagePath/
   img-0-0.gif   // images from 0 to 299px width
   img-0-1.gif
   img-0-2.gif
   img-0-3.gif
   img-0-4.gif
   img-0-5.gif
   img-1-0.gif   // images from 300 to 599px width
   img-1-1.gif
   img-1-2.gif
   img-1-3.gif
   img-1-4.gif
   img-1-5.gif
   img-2-0.gif   // images from 600 to 899px width
   img-2-1.gif
   img-2-2.gif
   img-2-3.gif
   img-2-4.gif
   img-2-5.gif
   img-3-0.gif   // images from 900 to 1199px width
   img-3-1.gif
   img-3-2.gif
   img-3-3.gif
   img-3-4.gif
   img-3-5.gif
   img-4-0.gif   // images from 1200px width
   img-4-1.gif
   img-4-2.gif
   img-4-3.gif
   img-4-4.gif
   img-4-5.gif

如果有6张图片（0到5张），并且每300px的宽度有一组图片，则代码应类似于：

   <script>
    var w = $( window ).width();
    if (w < 1500) {  //for width resolutions lower than 1500px
        widthId = Math.floor(w/300);
    } else {         // for resolutions of 1500 or higher
        widthId = 4
    }
    image = "img-" + widthId + "-" + Math.floor(Math.random() * 6) + ".gif";
    $('body').css("background-image", "url('/imagePath/" + image + "')");  
    </script>