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;
}

这是我的新手问题：

在上面的小提琴示例中，有一个图片的修复网址，但我必须根据上传内容使用：

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

裁剪和调整图像大小 - 是否可以使用＆lt;％= image_tag％＆gt;用于设置背景图像？

1 个答案: