jQuery 如何为 Twitter 引导程序缩略图设置高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18475937/
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
How can I set height for Twitter bootstrap thumbnails?
提问by Ion Ungurean
I'm having trouble setting up the Thumbnail module for my personal website. I use twitter bootstrap (3.0) for my project and I can't finish setting up the Thumbnail module.
我在为我的个人网站设置缩略图模块时遇到问题。我在我的项目中使用了 twitter bootstrap (3.0)，但我无法完成 Thumbnail 模块的设置。
The width is okay, but I can't set the height of thumbnails (I can't align all thumbnails as the same height).
宽度还可以，但我无法设置缩略图的高度（我无法将所有缩略图对齐为相同的高度）。
How I can set one (standard) height for all the thumbnails and zoom/scale image to center so they can fill all space without stretching the image?
我如何为所有缩略图设置一个（标准）高度并将图像缩放/缩放到中心，以便它们可以填充所有空间而不拉伸图像？
<div class="row">
<!-- Thumbnail 0 -->
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img.png" alt="...">
</a>
<div class="caption">
<h4>Arctic MX-2, 8g</h4>
</div>
</div><!-- /thumbnail 0 -->
<!-- Thumbnail 1 -->
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="blue.png" alt="...">
</a>
<div class="caption">
<h4>Arctic MX-2, 8g</h4>
</div>
</div><!-- /thumbnail 1 -->
</div><!-- /thumbnail -->
回答by Neil S
either in css:
无论是在 css 中：
.thumbnail img { min-height:50px; height:50px; } // or whatever height you desire
or inline:
或内联：
<img src="img.png" alt="..." style="min-height:50px;height:50px;" />
回答by Juan Camilo Guarin P
Hey I was looking at your question, cause I have had the same problem in Bootstrap where if one of the <div>'s height is higher than the other's, then the grid doesn't display properly. I figured out how to fix the thumbnail align problem, and I think many people could be using the CSS Flex property.
嘿，我正在查看您的问题，因为我在 Bootstrap 中遇到了同样的问题，如果其中一个<div>的高度高于另一个，则网格无法正确显示。我想出了如何解决缩略图对齐问题，而且我认为很多人都在使用 CSS Flex 属性。
In the div class="row"I added style="display:flex; flex-wrap: wrap;". Basically, my code looks like this:
在class="row"我添加的 div 中style="display:flex; flex-wrap: wrap;"。基本上，我的代码如下所示：
<div class="row" style="display:flex; flex-wrap: wrap;">
<div class="col-sm-3">
<div class="thumbnail">
<img src="http://lorempixel.com/500/300" style="width:200px">
<div class="caption">
<h4>Some thumbnail heading</h4>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="http://lorempixel.com/500/300" style="width:200px">
<div class="caption">
<h4>Some thumbnail heading</h4>
</div>
</div>
</div>
.. any number of thumbnails you want
</div>
So you can have different thumbnail heights and it will display properly, maybe not as jQuery Masonry, but at least better.
所以你可以有不同的缩略图高度，它会正确显示，也许不像jQuery Masonry，但至少更好。
回答by Rodolfo Jorge Nemer Nogueira
With SCSS, you can simply:
使用 SCSS，您可以简单地：
@media (min-width: $screen-sm-min) {.thumbnail img { height:100px; }}
@media (min-width: $screen-md-min) {.thumbnail img { height:150px; }}
@media (min-width: $screen-lg-min) {.thumbnail img { height:200px; }}
