【问题标题】:Dynamically assigning background image scss/sass动态分配背景图片 scss/sass
【发布时间】:2013-01-25 05:24:40
【问题描述】:

我想要做的是有一个表单,您可以在其中上传图片,然后当您查看该对象时,图片在特定 div 中垂直和水平居中。大小未知等。

除非有办法使用 image_tag 帮助器将其垂直居中,否则我希望能够将图像用作背景图像。在我的 .css.scss 文件中,我希望能够执行类似的操作

.image_div {
     background-image: image_url("#{@object.image}");
     background-position: center
}

我使用 CarrierWave 上传图片,当我输出 @object.image 时,它​​会在我的计算机上提供图片的路径(所以我不知道在生产中是否会被视为路径或 url)。有什么想法吗?

【问题讨论】:

    标签: ruby-on-rails ruby sass


    【解决方案1】:

    可能在 sass 文件中使用 erb,但这是一个非常非常糟糕的主意,因为您的 css 必须在每个请求上进行解析(并且浏览器将无法缓存它)。

    我建议将css的一个sn-p直接粘贴在样式标记中的视图页面上。这样它就会被页面评估。有意义吗?


    更新(添加请求的示例)

    将此添加到您的实际视图中(例如 show.html.erb):

    <style media="screen">
      .image_div { background-image: url(<%= @object.image %>); }
    </style>
    

    您可以将 background-position 声明保留在 css 文件中,因为它不是动态的。 @object.image 需要返回图像的实际路径,因此如果 @object.image 是一个 ruby​​ 对象,您将需要访问存储路径的任何属性(@object.image.path@object.image.url 或任何适合您的代码库)。

    【讨论】:

    • 相关元素的内联样式也很有意义。
    • 我找到了一个可行的解决方案 - 因为我知道我想要它的大小,所以我使用 minimagick 和carrierwave 来调整图片大小,使用重力 => 中心。尽管您的两个选项听起来都很棒,但我无法让它们中的任何一个起作用。也许是一个例子?
    • @Cade 我得到了你的工作 - 它不适用于:image-url('erb image_url') 但它适用于标准 css url('erb image_url')
    • @cimmanon 每当我在父 div 上将显示设置为内联时,我都无法降低高度,每当我在父 div 上将显示设置为 table-cell 时,宽度显示为 1px,我不能改变这一点。关于我做错了什么有什么想法吗?
    • 我有一部分人真的不喜欢这个答案,因为它将样式与标记混合在一起。我觉得应该有一个更合适的方法来做到这一点......
    猜你喜欢
    • 2015-10-04
    • 2019-09-25
    • 1970-01-01
    • 2022-01-23
    • 2019-07-31
    • 2016-10-01
    • 2015-07-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多