ruby-on-rails - 动态分配背景图片 scss/sass

标签 ruby-on-rails ruby sass

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

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

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

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

最佳答案

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

我建议将那一段 CSS 直接粘贴在样式标签中的 View 页面上。这样它就可以通过页面进行评估。有道理吗?


更新(添加请求的示例)

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

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

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

关于ruby-on-rails - 动态分配背景图片 scss/sass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14493043/

相关文章:

ruby - 减少 RSpec 中的代码重复

javascript - Google map V3 InvalidValueError Rails 5

java - ruby安装elasticsearch失败

css - 自定义字体不显示

ruby-on-rails - 如何在 active_admin formtastic 中嵌入原始 html

css - 如何更改 Foundation 5 中的中断点

javascript - 使用javascript压缩xhtml客户端?

ruby-on-rails - Devise 中的 NameError::SessionsController#create

javascript - gulp-sass 与 Gulp 4.0 和 gulp-cli 4.0 不管道 css

css - 检查变量是否包含在 SCSS 的单词列表中