Problem in image size when using bootstrap grid system


#1

Hi everybody
I have problem with sizes or the images when using bootstrap col-md-4 and put image on it , i made the images sizes is width and height 100% but some images appear bigger than others
i used this images



any ideas

.myimage{
width: 100%;
height: 100%;
}

<div class="row">
 <div class="col-md-4">
 <img class="myimage img-responsive thumbnail"  src="images/img1.jpg" alt="">
        </div>
        <div class="col-md-4">
          <img  class="myimage img-responsive thumbnail" src="images/img2.jpg" alt="">
        </div>
        <div class="col-md-4">
          <img  class="myimage img-responsive thumbnail" src="images/img1.jpg" alt="">
        </div>
    </div>


#2

col-md-4 just controls the width.

So all your images basically have the same width, which is about right. BS is working.

A workaround to keep all images the same size is to set a specific height to your div wrapper, and do an overflow:hide

But this will visually crop any photos you have that exceed the height.


#3

Thanks for reply but I can’t understand can you give me example in my code


#4

Where’s your codepen?


#5

#6

#7

Like this

.myimage{
    width: 100%;
}

.imgdiv{
    height: 200px;
    overflow: hidden;
}

See the 3rd photo? It’s way taller than the first 2 photos, since it’s a portrait format. But it stays within it’s assigned div, and doesn’t spill over.