html - 为什么画廊中的这些图像是 'shifted' 或 'bumped' ？

Question

我正在尝试为那些喜欢在我的图像现有 slider 上平铺查看的浏览本网站的用户实现图像显示方式的变体。

图库标签如下:

  <!-- 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(未显示未更改的 Bootstrap 类)

#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/

正如您从上面的三张图片中看到的那样，中型 Web 浏览器显示正确，而大号和小号浏览器会移动图像，就好像它们的位置是空的一样。需要说明的是，空白处并不是没有显示图像，只是那里不存在任何元素。

这是我尝试过的:

1. 在上传到服务器之前确保所有图片的大小完全相同
2. 将溢出设置为隐藏，以防某些图像不知何故变大并“撞到”下一张图像
3. 将 padding 和 margin 修改为大多数逻辑值，范围从 0px/0% 到其他更小的值
4. 将图像显示为背景图像而不是图像标签，这似乎可以解决这个特定问题，但会导致其他问题的全新世界，在重做大部分 javascript 时需要做更多的工作，最终不太可能如果有更简单的解决方案，这是值得的
5. 在每张图片之间添加另一个 div 标签以在图片之间创建填充
6. 添加另一个 div，每个图像周围没有溢出，硬编码为特定宽度，并 overflow hidden 。 (这也有效，但在使页面动态化时会造成噩梦，因为我必须准确指定宽度。

理想情况下，即使图像在上传时大小不完全相同，我也希望它能正常工作，这样它们可以整齐地显示，居中，并且不会相互“碰撞”错位。我在向搜索引擎描述我的问题时遇到了困难，因此发现很难找到任何特别有用或针对我的问题的内容。

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

谢谢!

Answer 1

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

让我们采用网格:

A B C
D E F
G H I

只要所有元素的高度完全相同，它们就是一个完美的网格。但是，如果 A 比其他元素高 1px，您的网格将变成:

A B C
    D E
F G H
I

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

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

解决此问题的建议是使用 Javascript 设置容器的高度。这样他们的高度就完全一样了。不要依赖 CSS 百分比来提供恒定大小。