Question

我在我正在构建的此页面上为大图像使用了jquery图像缩放插件：http://seans.ws/sandbox/test/thrive/

我试图在图像下方放置导航div，但我不能这样做因为图像绝对定位，并且图像的比例发生变化，所以我不能只指定导航的填充顶部值来获取它出现在照片下面。

非常感谢任何帮助。

Answer 1

我会将图像和导航div放在一个容器中，并在其上指定绝对位置（而不是图像）。这似乎是最简单，最直接的解决方案。

Answer 2

首先，图像必须绝对定位吗？通常，如果您希望图像相对于页面上的其他元素放置，或者您希望页面上的其他元素相对于图像放置它们相对放置，有时在绝对定位的＆lt; div＆gt;

中

如果您解释为什么图像必须绝对定位，可能会有一个更简单的解决方案。

假设需要绝对定位图像，我可以想象的唯一可能是修改jQuery插件或者在调整图像大小时制作第二个javascript来编辑填充顶部。

如果您需要图像绝对位于页面上但相对定位于所有其他元素，我建议将图像和内容（您希望在其下方显示）置于绝对定位的＆lt; div＆gt;内。元素，但让它们各自相对定位。

Answer 3

您可以获取height值，然后计算出需要多少填充。

var myheight = $('.maxAtOrigImageSize').height();
$('.nav').css('paddingTop', myheight+'px');

但是，您需要在窗口更改大小时添加事件，以便在用户调整窗口大小时，您可以更新导航的填充。

我正在回答你的问题，但我觉得有一个更清洁的解决方案。我会为调整大小的图片创建一个包含 DIV 的内容，然后使用导航 DIV 进行操作。在调整大小时，导航器总是自然地位于图像底部的正确位置。您可能需要考虑更改实现方式。