jquery - 具有不同图像大小的缩略图Bootstrap

我想要缩略图，其中包含不同大小和不同文本量的图像。但是我希望它们都具有相同的大小。像这样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;
}

以此类推。

SAMPLE