我想要缩略图,其中包含不同大小的图像和不同数量的文本。但我希望它们都具有相同的大小。像这样example from the Bootstrap site .
下面是我目前的代码,带有 demo on jsFiddle .
我有不同的图像尺寸,所以这被打破了。这可以通过 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>
最佳答案
您可以通过为容器定义尺寸来实现这一点。
例如在你的容器元素(.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;
}
以此类推其他元素。
关于jquery - 具有不同图像大小的缩略图 Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23379318/