Question

我正在开发Rails中的电子商务应用程序，并使用Bootstrap的缩略图类在类别页面和小部件中显示产品列表。

我的图片尺寸不同。我想将缩略图容器修复为某个高度和宽度（响应），然后将图像的大小调整为缩略图容器的约束高度和宽度内的最大可能缩放版本。

字幕/价格应相应调整。

这是一个演示。向下滚动。 http://mktdemo.herokuapp.com/

我正在寻找一些我可以在缩略图类中包含的css来设置它。

我的HTML（带一些红宝石）：

  <div class="row">
     <% @listings.each do |listing| %>
     <div class="col-md-3 col-xs-6">
        <div class="thumbnail" >
          <%= link_to image_tag(listing.image.url, class: "img-responsive"), listing %>
          <div class="caption">
             <h3><%= listing.name %></h3>
             <p><%= number_to_currency(listing.price) %></p>
         </div>
       </div>
     </div>
   <% end %>
 </div>

我已经尝试了以下但这只能修复容器大小，而不是图像或标题对齐。而且由于我正在修正高度和宽度，它可能也没有响应。

.thumbnail {
   width: 260px;
   height: 300px;
  }

Answer 1

您可以通过为图库创建div并使用css将图像设置为背景图像来完成此操作。然后，使用属性background-size。您可以使用background-size: cover或background-size: contain。设置背景尺寸：封面将缩放图像，使其完全填满背景区域，同时切掉多余部分。设置background-size：contains将缩放图像，使其保持原始高宽比并填充背景而不会切断图像。

所以你的代码必须是这样的：

<div class="thumbnail img-responsive">
  <div class="cell" id="image1"></div>
    ......
</div>

和css：

#image1{
  background: url("path");
  background-size:cover;
}

.thumbnail{
   width:250px;
   height:250px;
}

希望这会有所帮助:) 祝你好运！

Answer 2

我发布了这个问题。刚收到通知我收到了徽章，因为这个问题被观看了1000多次。

我在加载图片时必须在Imagemagick中设置一些设置。我的网站使用rails / paperclip，但只要你使用imagemagick，下面的这些设置就可以了。

我想出了这个并在此处发布了答案 - Rails 4 - Imagemagick Resize to fill space

Bootstrap CSS - 缩略图图像调整大小＆amp;响应

2 个答案: