Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Have Thumbnails with different images sizes 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.

Below is the code I have at the moment, with a demo on jsFiddle.

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>
like image 896
Diego Avatar asked Apr 30 '14 03:04

Diego


People also ask

How do I scale an image in Bootstrap?

To make an image responsive in Bootstrap, add a class . img-responsive to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

How do I change the size of thumbnails?

Navigate to the Settings > Media tab. Look for the Image sizes > Thumbnail size section. Change the default width and height of your thumbnails in pixels.


2 Answers

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{        
    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.

SAMPLE

like image 93
reuelab Avatar answered Sep 21 '22 01:09

reuelab


You can accomplish this with CSS on the img tag.

img {
    width: 200px;
    height: 200px;
}

or inline on each img tag like this

<img style="width: 200px; height: 200px" src="https://learn.adafruit.com/system/guides/images/000/000/339/medium310/overview_web.jpg" alt="Sample Image">
like image 23
sfletche Avatar answered Sep 21 '22 01:09

sfletche