统一缩略图大小的 CSS

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;

}

我的 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>

我的带有回形针/imagemagick 选项的模型代码。

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

Answer 1

CSS

一个相对简单的解决方法（除了Nitin Verma 详述的ImageMagick 选项）是创建一个CSS“包装器”，然后您可以将图像放入其中。这个包装器/容器可以是响应式的，并且可以为您的图像提供高度或宽度，隐藏其余部分：

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'"
  },