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

Posted 2023-02-25

【中文标题】裁剪和调整图像大小 - 是不是可以使用 <%= image_tag %> 设置背景图像？

【英文标题】：Crop and resize image - Is it possible to use <%= image_tag %> for setting a background-image?裁剪和调整图像大小 - 是否可以使用 <%= image_tag %> 设置背景图像？

【发布时间】：2013-12-16 21:28:47

【问题描述】：

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

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

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

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;

我的新手问题来了：

在上面的小提琴示例中，有一个图像的修复 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 %>

再次感谢！

【问题讨论】：

我不是 100% 确定你在问什么，但它是这样的吗？ jsfiddle.net/Josh_Powell/S59EW/21/show，这将在图像居中的同时保持比例。 （可以在顶部、左侧、右侧、底部等不同的点进行缩放）

@JoshPowell 是的，像这样，只是固定高度，而不是全屏。

那么你需要做的就是改变我的高度！ :)

@JoshPowell 谢谢，是的 ;)，但我真正的挑战不是裁剪，而是如何使用 rails image_path 而不是修复 URL 的问题。请参阅下面的 cmets...

【参考方案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

【讨论】：

菲利普，非常感谢您的回答！我试图实现它，并玩弄它，但我无法让它工作。我得到一个语法错误。可能是因为我使用的表格？我在上面添加了更多细节。

如果我使用 ' '，然后错误消失了，但不幸的是图像没有显示。

最后，我找到了一个可行的解决方案：' style="background-image: url()"> ' -- 再次感谢您的帮助。再次抱歉向这个新手提问。