Question

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

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

当页面上只有一个容器实例时，脚本可以正常工作，但是当找到容器的一个或多个实例时，垂直居中就会被破坏。似乎脚本对页面上的所有图像应用相同的边距，在我看来这是不理想的：

容器的不同实例具有不同的最大高度。
图像具有不同的高度，因此应具有独特的余量。

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

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

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

ReferenceError: centerImage is not defined

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

对这些问题/不一致的任何帮助都会非常感激，

谢谢，

路易斯。

Answer 1

---------抱歉放弃我的回答，未能阅读完整的问题--------------

是的，你是对的。只是快速浏览一下代码。

您可能会将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);
   });
 }

其他一切都很好。

希望有所帮助：）

响应式设计中图像的垂直居中在WebKit中表现不同

1 个答案: