Css 裁剪和调整图像大小-是否可以使用<；%=图像标签%>；用于设置背景图像？

在此项目中，用户可以将图像上载到帖子。 此图像应以固定高度和100%宽度显示

因此，图像必须根据上传的图像大小进行裁剪

我想使用一个CSS唯一的解决方案，如这里 其中，图像被集成为背景图像以裁剪图像

html:

下面是我的新手问题：

在上面的fiddle示例中，有一个图像的固定URL，但我必须根据上传情况使用如下内容：

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

“imagearea”，：id=>“img_prev”%>

是否可以使用上面的image_标记来集成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 %>

“imagearea”，：id=>“img_prev”%>
“图像字段”，
：行=>1，
：placeholder=>“输入您的标题。”，
：maxlength=>“48”%>

---

再次感谢

查看

图像路径

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

---

我不是100%确定你在问什么，但是这样吗，这将在图像居中时保持比率。（可以在顶部、左侧、右侧和底部缩放不同的点）@JoshPowell是的，类似这样的，只需固定高度，而不是全屏。然后你所需要做的就是更改高度I它！）@谢谢，是的；），但我真正的挑战不是裁剪，而是如何使用rails映像路径而不是固定URL。看到下面的评论…菲利普，非常感谢你的回答！我试图实现它，并玩弄它，但我无法让它工作。我有一个语法错误。可能是因为我使用的表格？我在上面添加了一些详细信息。如果我使用“”，则错误消失，但不幸的是图像没有显示。最后，我找到了一个有效的解决方案：“style=”background image:url（）“>”--再次感谢您的帮助。再次抱歉问这个新手问题。

<%= 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 %>

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