jQuery 具有不同图像大小的缩略图 Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23379318/
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
Have Thumbnails with different images sizes Bootstrap
提问by Diego
I will like to have thumbnail with images of different sizes and different amount of text. But I want them to all have the same size. Like this example from the Bootstrap site.
我想要具有不同大小和不同文本数量的图像的缩略图。但我希望它们都具有相同的尺寸。就像Bootstrap 网站上的这个例子。
Below is the code I have at the moment, with a demo on jsFiddle.
下面是我目前的代码，在 jsFiddle 上有一个演示。
I have different images size, so this gets broken. Is this possible with Bootstrap?
我有不同的图像大小，所以这被打破了。这可以用 Bootstrap 实现吗？
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h3>
Fading a RGB LED on BeagleBone Black
</h3><img src="https://learn.adafruit.com/system/guides/images/000/000/322/medium310/overview_web.jpg?" alt="Sample Image">
<div class="caption">
<p>In this tutorial, you will learn how to control the color of an RGB LED using a BeagleBone Black and Python.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h3>
Measuring Light with a BeagleBone Black
</h3><img src="https://learn.adafruit.com/system/guides/images/000/000/316/medium310/overview_web.jpg?" alt="Sample Image">
<div class="caption">
<p>In this tutorial, you will learn how to connect a photoresistor to a BeagleBone Black. The tutorial can also be used for other resistive sensors such as FSRs or SoftPots.</p>
</div>
</div>
</div>
回答by reuelab
You can achieve that by defining dimensions for your containers.
您可以通过定义容器的尺寸来实现这一点。
for example in your container element(.thumbnail), set a specific dimensions to follow like:
例如在你的容器元素（.thumbnail）中，设置一个特定的尺寸如下：
.thumbnail{
width: 300px;
// or you could use percentage values for responsive layout
// width : 100%;
height: 500px;
overflow: auto;
}
.thumbnail img{
// your styles for the image
width: 100%;
height: auto;
display: block;
}
and so on with the other elements.
等等与其他元素。
回答by sfletche
You can accomplish this with CSS on the imgtag.
您可以使用img标签上的 CSS 来完成此操作。
img {
width: 200px;
height: 200px;
}
or inline on each imgtag like this
或者img像这样在每个标签上内联
<img style="width: 200px; height: 200px" src="https://learn.adafruit.com/system/guides/images/000/000/339/medium310/overview_web.jpg" alt="Sample Image">
回答by monkeyinsight
You should setup height of those columns. In example we have same amount of text, so it has same height for each div.
您应该设置这些列的高度。在示例中，我们有相同数量的文本，因此每个 div 的高度都相同。
回答by Nguy?n M?nh Hà
Here is my solution, hope it help!
这是我的解决方案，希望对您有所帮助！
<style type="text/css">
.row{
display: flex;
flex-wrap: wrap;
}
.row>[class="col-sm-6 col-md-4"]{
display: flex;
flex-direction: column;
}
</style>
