Problem in image size when using bootstrap grid system

HTML-CSS
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
https://unsplash.com/?photo=lBL7rSRaNGs
https://unsplash.com/?photo=cmKPOUgdmWc
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>

prblemimg.jpg1349×1384 618 KB

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;
}

imggrid.png1172×508 220 KB

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.

1 Like