php - 创建图像的缩放缩略图并以有组织的方式回显结果 3 列，无限行，每行每列一个图 block

Question

到目前为止，这个脚本运行良好。然而，它并不完全是我想要的。我让它回显一个表单，对于它找到的每个图像，它回显一个 div 和与图像相关的其他优点。目前它在一个漂亮的长单列中回显所有找到的图像，并且缩放图像不是很成比例，(它们看起来扭曲)。

然而这就是我想要的，我不是 100% 知道如何去做。我想要三个或四个<div class=\"imageTile\">\n";，而不是一个长长的单列。在每一行中，直到脚本用完图像。磁贴应在漂亮的小列中对齐。

其次，我还没有完全弄清楚如何将它找到的图像缩放到它们看起来不变形的地方。 (基本上就是想把图片做成缩略图，这样当点击图片的时候，最终还是会出现原图)。

      <?php
            header('Access-Control-Allow-Origin: *');
            // if no project was sent, display some error message
            if(!isset($_GET['urlName'])) { die('No project has been chosen'); }
            // cast the project to integer (just a little bit of basic security)
            $urlname = (string) $_GET['urlName'];
            $path = $urlname;
            if (strpos($path, '../') !== false || strpos($path, "..\\") !== false || strpos($path, '/..') !== false || strpos($path, '\..') !== false)
                    {
                    // Strange things happening. 403 Forbidden
                    http_response_code(403);
                    } else {
            $dir = "uploads/$path";
            function ListFiles($dir) {
                if($dh = opendir($dir)) {
                    $files = Array();
                    $inner_files = Array();
                    while($file = readdir($dh)) {
                        if($file != "." && $file != ".." && $file[0] != '.') {
                            if(is_dir($dir . "/" . $file)) {
                                $inner_files = ListFiles($dir . "/" . $file);
                                if(is_array($inner_files)) $files = array_merge($files, $inner_files);
                            } else if (strstr($file, ".gif") || strstr($file, ".png") || strstr($file, ".jpg")) {
                                array_push($files, $dir . "/" . $file);
                            }
                        }
                    }
                    closedir($dh);
                    return $files;
                }
            }

echo "<form onsubmit=\"\">\n";           
            foreach (ListFiles("uploads/$path") as $key=>$file){
             $directory_file = $directory . $file;
                    $info = getImageSize($file);
             echo " <div class=\"imageTile\">\n";
             echo "   <img src=\"$directory_file\" width=\"110px\" height=\"120px\"><br>\n";
             echo "   <input class=\"data\" type=\"hidden\" name=\"imageFilename\" value=\"$file\">\n";
             echo "   <input class=\"data\" type=\"hidden\" name=\"imageGalleryID\" value=\"$path\">\n";
             echo "   <label for=\"$file\">Keep</label>\n";
             echo "   <input class=\"checkbox\" type=\"checkbox\">\n";
             echo " </div>\n";
            }
             echo " <div id=\"submit_buttons\">\n";
             echo "  <button type=\"reset\">Reset</button>\n";
             echo "  <input class=\"submit\" type=\"submit\" onclick=\"return false\" value=\"Submit\">\n";
             echo " </div>\n";
             echo "</form>\n";
            }
    ?>

Answer 1

我不知道您的 CSS 是什么样子，但您可以将 div 彼此对齐(假设它们具有固定的宽度和高度)它们将按列对齐。尝试在 CSS 的 imageTile 选择器中添加 float:left;。

关于您的第二个问题，如果您在 CSS 中设置 max-height 或 max-width，大多数现代浏览器将保持图像的纵横比并调整大小它根据最大宽度或最大高度。

改变这一行:

echo "   <img src=\"$directory_file\" width=\"110px\" height=\"120px\"><br>\n";

为此:

echo "   <img src=\"$directory_file\" style=\"max-width: 120px; max-height: 110px;\" /><br>\n";