随机图像自动调整大小答案

【问题标题】：Random Image Auto Rescale随机图像自动调整大小
【发布时间】：2011-05-24 20:17:26
【问题描述】：

我目前正在使用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!

【问题讨论】：

标签： php image random resize

【解决方案1】：

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

在隐藏的图像元素中在幕后加载图像。
绑定到图像元素的 onload 事件，以便您知道它何时完成。
在加载后获取图像的宽度/高度，并使用它来应用 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);

如果你真的想变得花哨，你可以绑定到 window re-size 事件，并根据可见屏幕大小、浏览器窗口大小等继续改变随机图像。

【讨论】：