根据宽度渲染动态生成的背景答案

【问题标题】：Rendering a dynamically generated background based on width根据宽度渲染动态生成的背景
【发布时间】：2015-06-15 16:24:53
【问题描述】：

所以我有一个背景图像属性（作为引用项目中图像的字符串），它属于一个徽章表。

我正在根据当前路径渲染每个背景图像。但我想以两个不同的最大宽度渲染不同的图像。

例如，

.badge-headline-background{style: "background-image:url(../assets/header-graphics/#{@badge.background})"}

以全宽呈现背景，而

.badge-headline-background{style: "background-image:url(../assets/small-header-graphics/#{@badge.background})"}

一旦最大宽度达到 700 像素左右，应使用较小的图像。

调整背景位置和背景大小不是一个选项。它必须是两个单独的图像。

任何意见表示赞赏。谢谢！

【问题讨论】：

我不认为你可以只用 CSS 做到这一点，我可能错了。我会通过在页面加载和调整元素大小时有条件地添加一个带有 javascript 的类来做到这一点。
您是否尝试过使用 css 媒体查询？
加一个用于 css 媒体查询

标签： html css ruby-on-rails sass haml

【解决方案1】：

这应该可以工作，使用动态值

.badge-headline-background

:css
  .badge-headline-background { 
    background-image: url("../assets/header-graphics/#{@badge.background}");
  }
  @media (max-width: 700px) {
    .badge-headline-background { 
      background-image: url("../assets/small-header-graphics/#{@badge.background}");
    }
  }

【讨论】：

【解决方案2】：

.class {background-image: url(whatever-1.jpg);}    
@media (max-width:700px) { .class {background-image: url(whatever-2.jpg;)} }

【讨论】：