Question

我有不同宽高比和大小的缩略图产品图片。这是一个市场应用程序，因此卖家将加载各种尺寸的图像。我想调整大小以使它们适合我所拥有的缩略图网格。

以下css在很大程度上完成了这项工作。但图像是顶部对齐的。我希望他们底部或中间对齐。 vertical-align由于某种原因无法运作。

请参阅演示网站mktdemo.outfitadditions.com的第二项。

有更好的方法吗？我也尝试了一些JS插件，但它们没有正常工作。

我希望css能够做出回应。我使用Paperclip将图像大小调整为200x200，即宽高比中最大可能的大小，适合200x200。因此，如果图像是横向尺寸，则宽度比抛出物体的高度短。这就是为什么下面的CSS。

.thumbnail {
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 80% 0 0 0;
  overflow: hidden;
  border: none;
}

.thumbnail img
{
  position: absolute;
  display: block;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 3px;
  bottom: 5px;
}

.caption {

  h3 {
  font-size: 15px;
  margin: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }

  p {
  font-size: 13px;
  margin: 4px;
  }

position: relative;
top: -7px;
padding: 3px;
background-color: #f0f0f0;

}

my html.erb：

<div class="center">
  <div class="row">
    <% @listings.each do |listing| %>
    <div class="col-md-3 col-sm-3 col-xs-6">
        <div class="thumbnail" > 
           <%= link_to image_tag(listing.image.url(:medium), class: "img-responsive"), listing, data: { no_turbolink: true } %> 
        </div>
        <div class="caption">
            <h3><%= link_to listing.name.downcase.titleize, listing, data: { no_turbolink: true } %></h3>
            <p><%= number_to_currency(listing.price) %></p>
        </div> 
     </div>
    <% end %>
  </div>
 <p><%= will_paginate @listings, renderer: BootstrapPagination::Rails %></p>
</div>

带有paperclip / imagemagick选项的模型代码。

has_attached_file :image, 
                  :styles => { :medium => "200x200>", :thumb => "100x100>" }

Answer 1

<强> CSS

一个相对简单的修复（除了ImageMagick详细说明的Nitin Verma选项）之外，就是创建一个CSS＆＃34;包装器＆＃34;然后您可以将图像放入其中。这个包装器/容器可以响应，并且可以提供图像高度或宽度，隐藏其余部分：

JSFiddle

<div class="thumbnail">
  <%= image_tag "your_image.png" %>
</div>

#css
.thumbnail {
    display: block;
    overflow: hidden;
    height: 200px;
    width: 200px;
}

.thumbnail img {
   display: block;
   height: 100%;
}

然后，您可以通过.thumbnail类设置图像高度/宽度的样式。这将使您能够确定您拥有的图像的大小。

我们倾向于将此方法用于样式，并使用ImageMagick调整大小以创建更小的图像。你必须记住，你永远不会得到与图像相同的比例，因此你需要能够提供最好的造型，无论它们的大小。

上面的CSS会做到这一点，而ImageMagick将为您提供创建较小分辨率图像的能力，使渲染过程更有效

Answer 2

如果您使用的是回形针，则可以在创建缩略图时进行。因为它使用image-magick进行所有图像处理。 Image-magick有许多图像处理选项。下面的代码是针对具有透明背景的图像。如果宽高比不像想要的那样，它会自动附加透明背景。

has_attached_file :logo,
  :default_url => "/images/no-logo.png",
  :styles => {:thumb =>  ['100x100>', :png]},
  :convert_options => {:thumb => '-size 100x100 xc:transparent +swap -gravity center -composite'},
  :storage => :s3,
  :s3_credentials => {
    :access_key_id => XXXXX,
    :secret_access_key => XXXXXXX
  },
  :path => ":attachment/:id.:extension"

如果您愿意，也可以从中心裁剪：

has_attached_file :image,
  styles: {
    thumb: '100x100^',
    medium: '200x200^'
  },
  convert_options: {
    thumb: " -gravity center -crop '100x100+0+0'",
    medium: " -gravity center -crop '200x200+0+0'"
  },

CSS用于统一缩略图大小调整

2 个答案: