0

我目前正在构建一个响应式网站，该网站使用一个出色的脚本，该脚本将图像垂直居中在父级中，最大高度和溢出设置为隐藏：

http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/

当页面上只有一个容器实例时，该脚本可以完美运行，但是当找到一个或多个容器实例时，垂直居中就会被破坏。似乎脚本对页面上的所有图像应用了相同的边距，在我的情况下考虑到这并不理想：

  1. 容器的不同实例具有不同的最大高度。
  2. 图像具有不同的高度，因此应该具有唯一的边距。

为了克服我面临的问题，我稍微修改了脚本，使用 jQuery .each() 函数迭代对象并运行该函数。结果可以在以下 URL 中看到：

http://www.lewismalpas.co.uk/rwd

这似乎按预期工作，每个图像都有一个独特的边距，这很好，但是我遇到了一些我无法解决的问题，我非常感谢你的帮助。首先，我在控制台中遇到无法修复的 JS 错误：

ReferenceError: centerImage is not defined

我在 Safari/Chrome 中也得到了意想不到的结果，因为图像在页面加载或刷新时没有垂直居中，但是使用 URL 字段按返回似乎会使图像居中，但这并不理想。

对于这些问题/不一致的任何帮助将不胜感激，

谢谢，

刘易斯。

4

1 回答 1

0

---------对不起放弃我的答案，未能阅读完整的问题--------------

你是对的。只是快速浏览了代码。

您可能希望将 centerImage() 函数更改为如下所示：

 function centerImage() {
   $container.each(function() { //iterate through every single container
      $this = $(this); // wrap the current container in jQuery so you can call some jQuery methods.
      $img = $this.find('img'); // finding the image inside current container.
      imageHeight = $img.height();
      wrapperHeight = $this.height();
      overlap = (wrapperHeight - innerHeight) / 2;
      $img.css('margin-top', overlap);
   });
 }

其他一切都很好。

希望能帮助到你 ：）

于 2012-09-09T21:37:28.757 回答