0

我正在尝试使用 Bootstrap（响应式）和 Stellar.js 来创建一个不错的视差布局。我遇到的问题是（根据 Stellar.js 文档）图像/div 必须具有定义的高度以避免图像弹出和弹出的问题（根据https://github.com/markdalgleish/ stellar.js/issues/7）。

由于我使用的是响应式布局，因此必须动态设置高度定义（以便图像在较小的视口上显示时不会失真）。

此外，Stellar.js 将元素设置为display: none直到它出现，因此无法在页面加载时简单地检查图像的大小。因此，一旦 Stellar.js 将其修改为display: 块，我需要找到一种方法来识别图像的高度，以便我可以将函数绑定到此事件

任何建议将不胜感激！我可以在必要时提供更多信息。

额外细节：

这是我正在使用的 HTML 元素的示例。值得注意的是，高度参考仍然需要应用于图像，即使 Stellar 插件在其父 div 上运行。

<div class="span6">
  <div  data-stellar-ratio="1.7" data-stellar-vertical-offset="-700">
    <img src="img/portfolio/web/hero.png" alt="Website design and development service">
  </div>
</div>

以下是我尝试对建议进行的 Stellar.js 插件的更新：

hideElement: function($elem) {

    var sImg = $elem.children('img'),
        imgHeight = sImg.height();

    sImg.css({ height: imgHeight });
    $elem.hide();
}

唉，这仍然会导致应用了“高度：0px”的图像，这表明计算是在图像加载之前或隐藏之后发生的！我不明白为什么会这样。

4

0 回答 0