css - 裁剪和调整图像大小 - 是否可以使用 <%= image_tag %> 来设置背景图像？

Question

在此元素中，用户可以将图片上传到帖子中。此图像应以固定高度和 100% 宽度显示。

因此必须根据上传的图片大小裁剪图片。

我想像这里一样使用纯 CSS 解决方案 http://jsfiddle.net/tx7sf/90/其中图像被集成为背景图像以裁剪图像。

html:

<div class="thumb" style="background-image: url('http://24.media.tumblr.com/tumblr_ly7xjxn3QI1r62v9yo1_1280.png');"></div>

CSS:

.thumb {
    display: inline-block;
    width: 100%;
    height: 400px;
    margin: 5px;
    border: 3px solid #c99;
    background-position: center center;
    background-size: cover;
}

这是我的新手问题:

在上面的 fiddle 示例中，有一个图像的修复 URL，但我必须根据上传使用如下内容:

<%= image_tag @post.image.url(:fullscreen), :class=> "imagearea", :id=> "img_prev" %> 

是否可以使用像上面这样的 image_tag 来实现这样的 CSS 背景图像集成？

我该怎么做？或者这根本没有意义？

非常感谢您的帮助!非常感谢!

更新:

更具体一点:我想在看起来像这样的表单中使用此图像:

<%= simple_form_for @post do |f| %>

 <%= image_tag @post.image.url(:fullscreen), :class=> "imagearea", :id=> "img_prev" %> 
   <div class="container"> 
              <h1> <%= f.text_area :title, 
                  :class => "imagefield", 
                  :rows => 1,
                  :placeholder => 'Enter your Title.',
                  :maxlength=>"48" %>
              </h1>
    </div>
    <div class="addpicture">
      <input href="#" id="post_image" name="post[image]" type='file'  onchange="readURL(this);" />
    </div>

<% end %>

再次感谢!

Answer 1

查看 image_path。

<div class="thumb" 
  style="background-image: url('<%= image_path(@post.image.url(:fullscreen) %>');"></div>

http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-image_path