html / php随机图像生成器-根据屏幕尺寸对齐图像

Question

大家好，谢谢您的时间

请帮助我修复下面的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> 

Answer 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>

Answer 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>