Question

我正在尝试实现图像显示方式的变体，以便观看此网站的用户更喜欢在我的图像现有滑块上查看平铺。

图库标记如下：

  <!-- TILE GALLERY -->
  <div id=tileGallery >
      <?php for ( $x=0; $x<40; $x++)
      {?>
        <div class="col-lg-3 col-md-4 col-xs-6">
          <img id=img_<?php echo$x;?> data-zoom-image="picsLarge/home-<?php echo $x+1;?>.jpg" class=imgGal src="pics/home-<?php echo $x+1;?>.jpg">
        </div><?php
      }?>
  </div>      
  <!-- end tile gallery -->

这是CSS（没有显示尚未更改的引导类）

#tileGallery
{
  width:90%;
  height:80%;
  margin-left:auto;
  margin-right:auto;
}
.imgGal
{
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

图像按照我预期的方式显示在网格中，但有些图像被“碰撞”或“移位”，并且空白空间保持在我期望的位置和图像的位置。（示例在网页的3个示例图片中跟随）：

问题的示例图片/屏幕截图：http://johnkellyphotos.com/exampleForSO/

正如您从上面的三张图片中看到的那样，中型网络浏览器可以正确显示，而大型和小型移动图像就好像它们的位置是空的。为了清楚起见，在空白区域中显示图像并没有失败，只是没有元素存在。

以下是我的尝试：

在上传到服务器之前确保所有图像的大小完全相同
将溢出设置为隐藏某些图像在某种程度上更大并且“碰撞”下一个图像
将填充和边距修改为大多数逻辑值，范围从0px / 0％到其他较小的值
将图像显示为背景图像而不是图像标签，这似乎可以解决这一特定问题，然而却导致了一个全新的其他问题世界，这些问题在重做大多数javascript时创造了更多的工作，最终不太可能值得一提的是，如果这有一个更简单的解决方案
在每个图像之间添加另一个div标签以在图像之间创建填充
添加另一个div，每个图像都没有溢出，硬编码到特定宽度，并隐藏溢出。（这也有效，但在使页面动态化时会产生噩梦，因为我必须准确指定宽度。

即使图像在上传时尺寸不完全相同，理想情况下也可以这样工作，这样它们可以整齐地显示，居中，并且不会相互“碰撞”。我无法向搜索引擎描述我的问题，因此很难找到对我的问题特别有帮助或特定的任何内容。

如果此问题的任何部分不清楚，请告诉我，以便我可以解决。

谢谢！

Answer 1

当像你一样在CSS中使用百分比时，很多时候宽度和高度以小数形式输出，各个浏览器的舍入方式不同。我遇到过这样的问题很多次，这种舍入是不稳定的，导致一些容器比相邻的容器大1px，这将导致“移位”的图像。

让我们走网格：

A B C
D E F
G H I

只要所有元素共享完全相同的高度，它们就是完美的网格。但是，如果A的四舍五入比其他元素高1px，那么你的网格就会变成：

A B C
D E F F G H
I

这是因为A比B和C高1px，这使得它将1px侵入到浮动正在创建的下一个“行”中。而现在D和E的行为就像A在他们的左边，他们在右边的位置开始了1个位置。

这可能以许多不同的方式发生，导致不同的图像在网格的不同区域被“推”。

我建议修复此问题是使用Javascript设置容器的高度。所以他们都是完全相同的高度。不要依赖CSS百分比给出不变的大小。

为什么图库中的这些图像被“移动”或“碰撞”？

1 个答案: