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();
}

悲しいかな、これでも画像に「height: 0px」が適用されます。これは、画像が読み込まれる前または非表示になった後に計算が行われていることを示しています。これがなぜなのか理解できません。

4

0 に答える 0