在rails-ember应用程序中，我如何在css中渲染bg图像并使其适合浏览器

In rails-ember app, how do I render a bg-image in css and make it fit the browser?

本文关键字：图像 浏览器 bg 应用程序 rails-ember css      更新时间：2023-09-26

我有一个ember应用程序，它是在rails后端之上构建的，Foundation是响应框架。

在主页index.hbs上，我想显示一个与浏览器的宽度/高度大小相同的背景图像。要做到这一点，在我的index.hbs文件中，我有以下内容：

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

我在css文件中将.row设置为100%的宽度。然后，为了将.home bgdiv的大小调整为浏览器的大小，我在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中有图像。

谢谢你的帮助。

我想这是因为当你抓住角落时，resize事件是第一次被显示的，因此div get的大小被设置了。

尝试这个肮脏的破解，看看它是否在一开始就工作，而不首先调整窗口大小：

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