0

I'm working with Bootstrap and I have a row with 3 columns inside with pictures inside the columns I set the width and height for pictures to 100% and I'm getting different sizes for each column even though all the original pictures have the same width and height

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row special-row" style="box-sizing: border-box;">
    <div class="col-md-12 intrinstic" style="margin-bottom:1%;"><img src="src" />
    </div>
    <!-- /top-pic -->

    <div class="col-md-4" style="border: 1px solid black;">Placeholder</div>

    <div class="col-md-4" style="border: 1px solid black;">Placeholder</div>

    <div class="col-md-4" style="border: 1px solid black;">Placeholder</div>

    <div class="col-md-6"><img alt="earring" src="src" style="max-height:100%; max-width:100%" /></div>

    <div class="col-md-6"><img alt="earring" src="src" style="max-height:100%; max-width:100%" /></div>

    <div class="col-md-12 intrinstic" style="margin-top:1%;"><img src="src" /></div>
  </div>

  <div class="row">
    <div class="col-md-4"> <img src="src" style="height:100%; width:100%" /> </div>
    <div class="col-md-4"> <img src="src" style="height:100%; width:100%" /> </div>
    <div class="col-md-4"> <img src="src" style="height:100%; width:100%" /> </div>

  </div>
</div>

My problem is with the last 3 columns having different heights.

EDIT: I'm working with Drupal so this code lives inside a bootstrap div with class container.

WebDevBooster
  • 14,674
  • 9
  • 66
  • 70
Marwan AK
  • 71
  • 1
  • 9
  • Where is the parent div having container or container-fluid class of
    ?
     – Nitin Dhomse Jul 25 '17 at 07:02
  • It's there. I'm working with drupal and this is a block code. So basically it lives inside the container =) my bad didn't point that out, i'll edit. Thanks – Marwan AK Jul 25 '17 at 07:03
  • Possible duplicate of [CSS - Equal Height Columns?](https://stackoverflow.com/questions/2114757/css-equal-height-columns) – Roy Bogado Jul 25 '17 at 07:07
  • everything is working as expected if I try it here. Could you provide us with an example to reproduce it? – Salketer Jul 25 '17 at 07:07
  • @Salketer Here you go https://jsfiddle.net/z03yn0d2/ thank you – Marwan AK Jul 25 '17 at 07:14
  • The natural images have different dimensions. Put image 1 in every column, and the sizes are equal. – Gerard Jul 25 '17 at 07:18
  • @Gerard a little in width, height is the same. – Marwan AK Jul 25 '17 at 07:20
  • Yeah, but you set width and height to 100%. That's when the mess starts. ( I'm getting different sizes for each column even though all the original pictures have the same width and height) – Gerard Jul 25 '17 at 07:21
  • @Gerard Ok thank u. provide it as an answer for the green tick if you'd like. – Marwan AK Jul 25 '17 at 07:24

4 Answers4

1

The problem you are facing is that the pictures you are using do not have the same sizes.

If you use height in percent, it will only be taken into account if the container has a defined height, which is not the case. That means that the default height behavior is applied. This means that the image will keep it's ratio and the height will be defined according to the set width.

So what happens here is that you define the 3 images to have the exact same width (all 100% of a col-md-4) but since they do not have the same height/width ratio, their height differs.

Now to find solutions to this kind of problem: You could use the pictures as background images, CSS backgrounds offer different ways to handle how they resize and you could easily achieve a same height same width design with rules to auto truncate the overflowing parts.

You could also force a height, but that would stretch your images. You could also resize them by hand to make sure they are all of the same size, this will give you the best control, but is time consuming.

Salketer
  • 14,263
  • 2
  • 30
  • 58
0

Row and col-md-4 classes haven't a definite size so, you need to set definite height to the col-md-4 divs.

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Cats</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
<style>
    .cats div {
        height: 300px;
    }
    .cats div img{
        padding: 5px;
        height: 100%;
    }
</style>
<div class="container">

  <div class="row cats">
    <div class="col-md-4"> <img class="img img-responsive" src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" style="height:100%;" /> </div>
    <div class="col-md-4"> <img  class="img img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/7a/ac/e7/7aace71b62fb8ec8de6d4ec650185747.jpg" style="height:100%;" /> </div>
    <div class="col-md-4"> <img class="img img-responsive" src="http://www.warrenphotographic.co.uk/photography/bigs/38089-Tabby-male-cat-portrait.jpg" style="height:100%;" /> </div>
  </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" />
</body>
</html>

Try to read this stackoverflow answer: here

As you will see running this html snippet, all img parent divs have the same height and the img will fill the div height.

bruce182
  • 311
  • 4
  • 13
0

You need to remove width: 100% for the images and the columns will be equal in height. Fiddle.

Gerard
  • 15,418
  • 5
  • 30
  • 52
0

You have to take note that in bootstrap its divided by 12 columns for some reason and it has its corresponding number of columns that is being occupied for example col-md-4 occupies 4 columns. So you would it expect that if you put an image to col-md-4 and put an image in col-md-6, it would have a different size. And i would recommend using only height 100% to maintain aspect ratio.

Redondo Velasco
  • 103
  • 1
  • 8