html/php 随机图像生成器 - 根据屏幕大小对齐图像答案

【问题标题】：html/php random image generator - align image based on screen sizehtml/php 随机图像生成器 - 根据屏幕大小对齐图像
【发布时间】：2018-02-07 21:39:58
【问题描述】：

大家好，感谢您的宝贵时间

请帮助我修复下面的 html 代码，我试图在每次用户/浏览器刷新页面时实现图像刷新（随机顺序），此时它工作正常。但是图像不会自动调整大小以适应屏幕，换句话说，如果图像大于屏幕，那么我必须向下/向右滚动才能看到图像，请帮我解决这个问题，让我抓狂

我要文件夹叫 domain.com/index.php 包含所有图像的 domain.com/images 文件夹

	<!DOCTYPE html>
<html>
<body style="background-color:transparent;">

<style type="text/css">
.myImage
{
  //  margin: auto;
  //  display: block; 
    height: auto;
    width: auto;
  //  padding: 0px;
  //object-fit: contain
  //  overflow-x: auto;
  //   white-space: nowrap;
}
</style>


<?php 
$folder = opendir(images);

$i = 0;
while(false !=($file = readdir($folder))){
if($file != "." && $file != ".."){
    $images[$i]= $file;
    $i++;
    }
}
$random_img=rand(0,count($images)-1);
echo '<img src="images/'.$images[$random_img].'" alt="image" class="myImage" ';
		
			?>
				
</body>
</html>

【问题讨论】：

你能澄清一下这个问题吗？不清楚你想要什么。

标签： php html css image

【解决方案1】：

首先，您没有关闭标签。你错过了结束>。我知道当你一直在做某事时，这些事情有时很容易被忽略。

应该是这样的：

echo '<img src="images/'.$images[$random_img].'" alt="image" class="myImage">';

您可能能够解决您的问题，但是将这部分 HTML 放入另一个 div 并为该 div 定义一个宽度，使其小于您的屏幕尺寸。

例如：

echo '<div class="imgbox">';
echo '<img src="images/'.$images[$random_img].'" alt="image" class='myImage'>';
echo '</div>';

然后使用固定像素或响应百分比为其添加 CSS

.imgbox{
  width: px OR %;
  height: px OR %;
}

编辑：

    <!DOCTYPE html>
<html>
<body style="background-color:transparent;">

<style type="text/css">
.myImage{
  //  margin: auto;
  //  display: block; 
    height: auto;
    width: auto;
  //  padding: 0px;
  //object-fit: contain;
  //  overflow-x: auto;
  //   white-space: nowrap;
}

.imgbox{
      width: set px OR % values here;
      height: set px OR % values here;
    }
</style>


<?php 
$folder = opendir(images);

$i = 0;
while(false !=($file = readdir($folder))){
if($file != "." && $file != ".."){
    $images[$i]= $file;
    $i++;
    }
}
$random_img=rand(0,count($images)-1);
echo '<div class="imgbox">';
    echo '<img src="images/'.$images[$random_img].'" alt="image" class="myImage">';
    echo '</div>';

            ?>

</body>
</html>

【讨论】：

替换 echo '</div>'; 和 echo '<div class="imgbox">'; 因为我忘记了分号
@IncredibleHat 他可能就是这么做的。然后我在写的时候傻傻的复制粘贴，忘了加;哈哈。希望它现在对你有用 Aj
Aj，我更新了我的答案，为您在完整代码中包含两个缺少的分号。很抱歉犯了这个错误。
好的，它终于可以工作了，谢谢，但是没有根据屏幕尺寸对齐
感谢您的所有帮助 Vel 非常感谢

【解决方案2】：

你可以试试这样的。我在本地开发盒上进行了测试，看起来还不错。希望这可以帮助。您必须对目录路径进行一些小调整，但应该可以正常工作。包含图像的目录的路径必须是完整路径。 “glob”是一个 PHP 函数，它使用模式匹配返回一个目录内容的数组（参见http://php.net/manual/en/function.glob.php）。

<html>
<head>
    <style type="text/css">
    .myImage
    {
        height: auto;
        width: auto;
        max-width: 100%;
        max-height:100%;
    }
    </style>
</head>
<body style="background-color:transparent;">
    <?php
        // Grab the contents of the directory using a file matching pattern.
        $folder = glob(__DIR__.'/html/ImageFiles/*.jpg');
        if (false === $folder || empty($folder)) {
            // Show some default image.
        } else {
            // Randomize the array.
            shuffle($folder);
            // Grab the first element off the array.
            $random_img = array_pop($folder);
            // In the src= replace the full file path to make absolute path.
            echo '<img src="'.str_replace(__DIR__, '', $random_img).'" alt="image" class="myImage">';
        }
    ?>
</body>
</html>

【讨论】：

$folder = glob(DIR.'/html/ImageFiles/*.jpg'); $folder = example.com/images(DIR.'/html/ImageFiles/*.jpg');你想让我把它改成这样吗
$folder = glob(DIR.'example.com/Images/*.jpg');对不起，我的意思是上述正确
假设你的目录结构是这样的，其中 index.php 和 images 目录在同一个父目录中： /index.php（包含上面代码的文件） /images/image.jpg 然后你会有： $folder = glob(DIR.'/images/*.jpg');希望这会有所帮助-
抱歉，一直删除我的下划线和格式。 $folder = glob(__DIR__.'/images/*.jpg');