具有不同图像大小的缩略图Bootstrap [英] Have Thumbnails with different images sizes Bootstrap
本文介绍了具有不同图像大小的缩略图Bootstrap的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望缩略图具有不同尺寸和不同数量的文字。但我希望他们都有相同的尺寸。像这个 Bootstrap网站的例子。
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.
以下是我目前的代码,在jsFiddle上有演示。
Below is the code I have at the moment, with a demo on jsFiddle.
我有不同的图像大小,所以这会被破坏。这可能与Bootstrap?
I have different images size, so this gets broken. Is this possible with 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>
推荐答案
您可以通过为容器定义尺寸来实现这一点。
You can achieve that by defining dimensions for your containers.
例如在你的容器元素(.thumbnail)中,设置一个特定的尺寸如下:
for example in your container element(.thumbnail), set a specific dimensions to follow like:
.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
这篇关于具有不同图像大小的缩略图Bootstrap的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文