为什么图库中的这些图像是 'shifted' 或 'bumped'？

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（未显示 bootstrap 类未更改）

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

图像按照我的预期显示在网格中，但是有些 'bumped' 或 'shifted' 超过了，并且在我期望的位置保留了一个空的 space 并且图像是。（示例如下3个网页示例图片）：

问题示例 images/screenshots：http://johnkellyphotos.com/exampleForSO/

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

这是我尝试过的：

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

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

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

谢谢！

Answer 1

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

让我们使用网格：

A B C
D E F
G H I

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

A B C
D E
F G H
I

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

这可能会以多种不同的方式发生，从而导致不同的图像在网格的不同区域得到 "pushed"。

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

为什么图库中的这些图像是 'shifted' 或 'bumped'？

Why are these images in a gallery being 'shifted' or 'bumped'?

html

css

image

gallery