Question

我有一个简单的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能够正常运行？

请注意，此问题仅发生在某些图像上，并且不取决于所显示图像的格式。任何帮助都非常有用

Answer 1

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

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

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

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

1 个答案: