php 防止动态添加的垂直图像水平显示答案

【问题标题】：php Preventing dynamically added vertical images from being displayed horizontalphp 防止动态添加的垂直图像水平显示
【发布时间】：2016-03-02 10:05:51
【问题描述】：

我正在处理的一个简单的 cms 存在这个问题：我有一个简单的 php 函数从指定目录获取图像元素，并将它们打印到 html

<?php if($row["imgs"] == TRUE){ ?>
              <div class="imrow">
                <?php
                  $dir = $row["folder"];
                  $img = glob($dir."*.{jpg,jpeg,png}", GLOB_BRACE);
                  $tabing = 3;
                  $scale = sizeof($img);
                      for ($i = 0; $i < $tabing; $i++)  {
                echo '<img src="'.$img[$i].'" alt="image" />';
                  }
                ?>
              </div><?php }//closing the first if of images ?>
                (...)
<?php   if($row["imgs"] == TRUE) { ?>
            <div class="imrow">

          <?php
                for ($i = $tabing; $i < $scale; $i++)  {

                  if(!($i % $tabing) && ($i!=0)){echo '</div><div class="imrow">';}
                    echo '<img src="'.$img[$i].'" alt="image" />';


            }
          ?>
          </div>
          <?php }//second if closing ?>

图像和行的样式：

.imrow {
    display: block;
}

.imrow img {
    z-index: 10;
    float: left;
    height: 100%;
    cursor: pointer;
    transition: transform .5s ease;
    box-shadow: 1px 1px 12px rgb(200, 200, 200);
}

并使用简单的 jQuery 函数进行布局

 $(".imrow").each(function () { // for every row
        var row = $(this); //it gives it a name
        var rowW = row.width(); //it seals it's width
        var imgW = 0; //it sets a image width variable
        var fixH = 600; //and get a fixed amount

        row.children().each(function () {
            $(this).css("height", fixH); //apply fixed height to element in order to get ratio
            imgW += $(this).width(); //get the width of this and
            $(this).css("height", "100%");
            arr.push($(this).attr("src")); // restore

        });
          row.css("height", rowW / (imgW / fixH) - 2);
    });

这里的问题是，一些添加的垂直图像变成了水平图像这是它在文件夹中的外观

以及它在网站上的结果：

编辑：从我所见，这是一个 php 唯一的问题，因为当我分析 chrome 中的元素时，默认情况下图像会在内部翻转，正如你们都可以在这里看到的：所以我的第一个赌注是 glob 做错了什么。

有没有人经历过，或者知道如何让 glob 正确获取所有内容？

请记住，此问题仅发生在部分图像上，并且不取决于显示图像的格式。任何帮助都会非常有用

【问题讨论】：

直接用chrome打开图片会怎样？（将图像直接拖到 Chrome 中）。我不觉得它是 glob，因为它只扫描目录并返回文件名列表，但不应更改任何属性。另请查看this question 是否与您有关。也可以在其他浏览器上试试。
该网站在 Firefox 中看起来是一样的，同时将图像拖动到两个浏览器中使其显示在正确的方向上。
提供的链接中的答案确实解决了 Firefox 的问题，但仅限于此。其他人仍然显示问题。可能是由于no compability with other browsers
您可能需要编辑这些图像的元数据。 Maybe this blog article can be of help
安德鲁你是对的。在 Photoshop 中打开文件并保存它们解决了这个问题。请写下并回答，以便我接受。

标签： php jquery html css image

【解决方案1】：

问题似乎是存储在描述正确方向的图像中的元数据。

有一个image-orientation css 属性应该用于以正确的方向显示图像，但它似乎不是supported in all browsers。

目前唯一的其他解决方案是使用元数据编辑器编辑图像的元数据，或者像您一样在 Photoshop 中打开图像并保存。

【讨论】：