jquery - 用于统一缩略图大小的 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>

我的带有 paperclip/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 将为您提供创建分辨率较低的图像的能力，从而使渲染过程更加高效