在rails-ember應用程序中，如何在CSS中渲染bg圖像並使其適合瀏覽器？

Question

我有一個ember應用程序，它建立在以Foundation為響應框架的Rails后端之上。

在主頁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中有圖像。

謝謝你的幫助。

Answer 1

我猜這是因為當您抓緊角落時，第一次不顯示resize事件，因此div get是它的大小設置。

試試這個骯臟的技巧，甚至在開始時也可以正常工作，而無需先調整窗口大小：

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