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

您可以尝试这样的事情。我在我的本地开发盒上测试并且显示正常。希望这可以帮助。您必须对目录路径进行一些小的调整，但应该可以正常工作。包含图像的目录的路径必须是完整路径。＆＃34;水珠＆＃34;是一个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>

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

2 个答案: