随机图像自动重缩放

问题描述

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

    

解决方法

好吧，我可能会采用JavaScript方法。 在隐藏的图像元素中将图像加载到幕后。 绑定到图像元素的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);

如果您真的想花哨的话，可以绑定到窗口调整大小事件，然后继续根据可见屏幕大小，浏览器窗口大小等来更改随机图像。