随机图像自动缩放

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 方法。

1. 将图像加载到隐藏图像元素的幕后。
2. 绑定到图像元素的 onload 事件，以便您知道它何时完成。
3. 加载图像后获取图像的宽度/高度，并使用它来应用 CSS 等。根据浏览器的外观、图像大小等来更改页面。

伪代码：

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

如果您真的想变得更奇特，您可以绑定到窗口调整大小事件并继续根据内容更改随机图像可见屏幕尺寸、浏览器窗口尺寸等。