随机图像自动重新调整

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

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