Question

我创建了一个基于RoR的应用程序/网站，客户端可以将自己的背景图像上传到封面页面。

一个图像的效果很好，但我希望网站能够快速响应并允许我的客户选择上传3个完全独立的图像，这些图像根据窗口的px宽度显示。

目前我有以下代码（仅显示相关代码），工作正常：

在covers_controller.rb中：

class CoversController < ApplicationController

 #
 @covers = Cover.all
 @cover = Cover.find_by(:published => 'yes')
 #

end

在application.html.erb中：

<body style="background-image: url(<%= @cover.image %>)">

然而，我没有成功地使封面图像响应。我试过以下......

使用以下代码添加css.erb文件：

@media (max-width: 767px) {
  .cover-bg {
    background-image: url(<%= @cover.image %>)
  }
}

@media (min-width: 768px) {
  .cover-bg {
    background-image: url(<%= @cover.m-image %>)
  }

}

@media (min-width: 1200px) {
  .cover-bg {
    background-image: url(<%= @cover.lg-image %>)
  }

}

对于上面的css.erb，我在模型中添加了两个新图像m-image和lg-image（使用paperclip），并将.cover-bg类添加到application.html.erb上的body标签，但是得到一个空白页。

更新：这是模型。我意识到我没有将新图像添加到模型中。但是，当第一次测试使用css.erb的想法时，我使用了来自三个不同模型的图像来处理不同的@media css，并遇到了同样的问题：

class Cover < ActiveRecord::Base

      has_attached_file :image, 
        styles: { xlarge: "1600x1600>", large: "600x600>", medium: "300x300>", thumb: "100x100>" }

      validates_attachment_content_type :image,
        content_type: /\Aimage\/.*\z/

end

我希望有一个简单的解决方案，但我还没有找到它。我也尝试了各种应用程序辅助方法，但到目前为止还没有运气。

Answer 1

您的.css.erb文件无法正常工作，因为您正在调用依赖于实例的对象，如果可能，此文件将被预编译 - 使其成为静态。

您如何建议application.css能够阅读@cover？

-

当您使用<body style="...">时它工作的原因是因为当您在视图中有内联样式时，Rails可以访问实例信息的所有数据等。

要解决此问题，您需要在您可以访问所有实例数据的位置（即视图）中引用媒体查询。

在查看some resources之后，我认为您最好将其放入应用的布局的<head>中：< / p>

#app/views/layouts/application.html.erb
<head>
   <%= if [[conditional for page]] %>
      <style>
         @media (max-width: 767px) {
            .cover-bg {
               background-image: url(<%= @cover.image.url %>)
            }
         }

         @media (min-width: 768px) {
           .cover-bg {
              background-image: url(<%= @cover.image.url(:medium) %>)
           }
         } 

        @media (min-width: 1200px) {
           .cover-bg {
             background-image: url(<%= @cover.image.url(:large) %>)
           }
        }
      </style>
   <% end %>
</head>
<body class="cover-bg">
...

这可以让您分配自定义背景图片大小。

-

您要查看的另一件事是background-size: cover：

#app/assets/stylesheets/application.css
.cover-bg {
   background-size: cover;
}

这必须伴随着内联＆＃34;背景图像＆＃34;风格，但如果它正确完成，将允许您调整屏幕大小，并不受背景大小变化的影响。

<强>更新

Ruby on Rails应用程序本质上是动态的 - 它们连接到数据库等。

每次向Rails应用程序发送请求时，服务器上都会发生很多事情（您可以阅读有关它如何与MVC一起使用的更多信息）：

简而言之，Rails基本上就像一个驱动器，你拉起来，发送你的请求/订单，然后Rails带回来的货物。＆＃34;商品＆＃34;呈现HTML代码，然后浏览器在屏幕上输出。

这个呈现的HTML - 虽然会在后端穿插@instance_variables等 - 但对于浏览器来说将是 static 。

您的浏览器只不过是呈现HTML / CSS / JS的引擎。 Rails＆＃34;编译＆＃34;您的数据并发回一个HTML文件，以便Chrome / Firefox可以在屏幕上输出有用的内容。

换句话说，您的<%= @instance_variable %>仅适用于＆＃34;后端＆＃34;应用程序（当您的＆＃34;订单＆＃34;正在处理时）。这意味着，如果您希望使您的应用程序具有多样性，那么您以确保所有后端数据都可用于每次返回浏览器的应用程序部分。

因此，你的CSS有问题。就其本质而言，CSS是静态。没有理由将其包含在每个请求/订单重新填充的昂贵过程中。有点像每次改变直驱袋的设计。你做了一次，然后使用它们好几年了（袋子不是每次都用专业印刷品个性化）。

因此，他们保持静态 - precompiled（minified），以便可以在下载一次，然后在用户浏览时保留在缓存中。

如果您需要制作CSS变量（IE使用后端数据），只有在文件预编译之前它可以包含它。如果您尝试访问实例变量，则必须将其保留在视图/布局中。

上传的响应式背景图像

1 个答案: