Question

我目前正在使用http://photomatt.net/scripts/randomimage来显示随机背景图片。我想根据窗口或div宽度自动重新缩放这些图像（动态？）。这甚至可能吗？如果你有时间和能力，代码将是不可思议的。：）

提前致谢！

以下是您方便使用的当前随机图片代码：

<?php
// Make this the relative path to the images, like "../img" or "random/images/".
// If the images are in the same directory, leave it blank.
$folder = '';

// Space seperated list of extensions, you probably won't have to change this.
$exts = 'jpg jpeg png gif';

$files = array(); $i = -1; // Initialize some variables
if ('' == $folder) $folder = './';

$handle = opendir($folder);
$exts = explode(' ', $exts);
while (false !== ($file = readdir($handle))) {
    foreach($exts as $ext) { // for each extension check the extension
        if (preg_match('/\.'.$ext.'$/i', $file, $test)) { // faster than ereg, case insensitive
            $files[] = $file; // it's good
            ++$i;
        }
    }
}
closedir($handle); // We're not using it anymore
mt_srand((double) microtime()*1000000); // seed for PHP < 4.2
$rand = mt_rand(0, $i); // $i was incremented as we went along

header('Location: '.$folder.$files[$rand]); // Voila!

Answer 1

好吧，我可能会采用javascript方法。

在隐藏的图像元素中将图像加载到幕后。
绑定到image元素的onload事件，以便知道它何时完成。
在图像加载后获取图像的宽度/高度，并使用它来应用CSS / etc。根据浏览器的外观，图像大小等等来显示页面

伪码：

var body = document.getElementsByTagName('body')[0];
var img = document.createElement('img');

img.src = 'random_image.php';
img.style.display = 'none';
img.onload = function(){
  // modify the background styles based on your own conditions
};
body.appendChild(img);

如果你真的想要花哨，可以绑定到窗口重新调整大小的事件，并根据可见的屏幕大小，浏览器窗口大小等继续更改随机图像。

随机图像自动重新缩放

1 个答案: