jQuery Bootstrap CSS - 缩略图图像调整大小和响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25448371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap CSS - Thumbnail Image Resize & Responsive
提问by Moosa
I'm developing an ecommerce app in Rails and using Bootstrap's thumbnail class to display product listings in category pages and widgets.
我正在 Rails 中开发电子商务应用程序，并使用 Bootstrap 的缩略图类在类别页面和小部件中显示产品列表。
My images are of different sizes. I want to fix the thumbnail container to some height and width (responsive) and then resize the images to be the largest possible scaled versionwithin the constrained height and width of the thumbnail container.
我的图像大小不一。我想将缩略图容器固定到某个高度和宽度（响应式），然后在缩略图容器的约束高度和宽度内将图像调整为最大可能的缩放版本。
And the caption/price should be aligned accordingly.
标题/价格应相应地对齐。
here is a demo. scroll down. http://mktdemo.herokuapp.com/
这是一个演示。向下滚动。http://mktdemo.herokuapp.com/
I am looking for some css I can include on the thumbnail class to set this.
我正在寻找一些可以包含在缩略图类中的 css 来设置它。
My html (with some ruby):
我的 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>
I've tried the below but this only fixes the container size, not the image or the caption alignment. And since I'm fixing the height and width, it's likely not responsive either.
我试过下面的，但这只能修复容器大小，而不是图像或标题对齐。而且由于我正在修复高度和宽度，因此它也可能没有响应。
.thumbnail {
width: 260px;
height: 300px;
}
回答by Anjaly
You can do this by creating divs for your gallery and use css to set the image as a background image. Then, use the property background-size. You can either use background-size: coveror background-size: contain. Setting the background-size: cover will scale the image so that it completely fills the background area while cutting off the excess. Setting background-size: contain will scale the image so that it maintains its original aspect ratio and fills the background without cutting off the image.
您可以通过为您的画廊创建 div 并使用 css 将图像设置为背景图像来做到这一点。然后，使用属性background-size。您可以使用background-size: cover或background-size: contain。设置 background-size:cover 将缩放图像，使其完全填充背景区域，同时切掉多余的部分。设置 background-size: contains 将缩放图像，使其保持其原始纵横比并填充背景而不切断图像。
so your code must be looking something like this:
所以你的代码一定是这样的：
<div class="thumbnail img-responsive">
<div class="cell" id="image1"></div>
......
</div>
And the css:
和CSS：
#image1{
background: url("path");
background-size:cover;
}
.thumbnail{
width:250px;
height:250px;
}
hope this helps :) good luck!
希望这有帮助，祝你好运！
回答by Moosa
I posted this question. Just got notified that I got a badge because this question was viewed 1000+ times.
我发布了这个问题。刚刚收到通知说我得到了一个徽章，因为这个问题被查看了 1000 多次。
I had to set some settings within Imagemagick while loading the image. My site uses rails/paperclip but as long as you're using imagemagick, these settings below should work.
加载图像时，我必须在 Imagemagick 中设置一些设置。我的网站使用 rails/paperclip，但只要您使用 imagemagick，下面的这些设置就可以工作。
I figured this out and posted the answer here - Rails 4 - Imagemagick Resize to fill space
我想通了，并在此处发布了答案 - Rails 4 - Imagemagick Resize to fill space
