动态分配背景图像scss/sass

Question

我想要做的是有一个表格,你可以上传一张图片,然后当你查看该对象时,图片锥体在特定的div中垂直和水平居中.它的大小是未知的,等等.

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

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

我使用CarrierWave上传图片,当我输出@ object.image时,它会将我计算机上的路径提供给图像(所以我不知道在生产中是否会被视为路径或网址).有任何想法吗？

Answer 1

这是可能的SASS文件中使用再培训局,但它是一个非常,非常糟糕的主意,因为你的CSS会对每个请求被解析(和浏览器将无法进行缓存).

我建议只在样式标记的视图页面上直接粘贴一段css.这样就可以通过页面进行评估.合理？

更新(添加请求的示例)

将其添加到您的实际视图中(例如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适合您的代码库的任何属性).