0

レスポンシブ フレームワークとして Foundation を使用して、Rails バックエンド上に構築された ember アプリがあります。

ホームページ index.hbs で、ブラウザの幅/高さのサイズの背景画像を表示したいと考えています。これを行うには、index.hbs ファイルに次のように記述します。

<div class="row">
  <div class="large-12 columns home-bg">
    <h1>EW</h1>
</div>

css ファイルで .row の幅を 100% に設定しています。次に、.home-bg div のサイズをブラウザーのサイズに合わせて、index_view.coffee に次のように記述します。

App.IndexView = Ember.View.extend(didInsertElement: ->
  $(window).resize ->
    $(".home-bg").height $(window).height()
)

そして最後に、私のcssファイルで：

.home-bg {
  background: image-url("home_bg.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

しかし、ページを読み込むと、div の高さが計算されず、背景画像も読み込まれず、リンクが壊れているように見えます。/assets/images に画像があります。

ご協力いただきありがとうございます。

4

1 に答える 1

1

コーナーをつかむと、resizeイベントが初めてディスパッチされ、div がサイズ セットになるためだと思います。

最初にウィンドウのサイズを変更せずに、最初から機能するかどうかを確認するために、この汚いハックを試してください。

App.IndexView = Ember.View.extend(didInsertElement: ->
  $(".home-bg").height $(window).height()
  $(window).resize ->
    $(".home-bg").height $(window).height()
)
于 2013-08-26T21:07:39.383 に答える