2

I have a 3 column grid, of different widths, which contain an image element each.

enter image description here

The structure is essentially

<div class="row">
    <div class="col-3"><img></div>
    <div class="col-6"><img></div>
    <div class="col-3"><img></div>
</div>

Each image is set to:

img {
  display:block;
  max-width: 100%;
  height: auto;
}

Each column also contains padding-left and padding-right of 15px;

This however causes the middle col-6 column to be taller than the other two columns in the row.

I have tried to double the left- and right-padding for the longer the col-6 column but I don't think this is ideal and also does not work responsively.

I have also tried using flexbox to no avail.

What is the best solution to keep all images the same height and still work responsively?

Marcus Christiansen
  • 3,017
  • 7
  • 49
  • 86
  • Is it possible you can make a pen or fiddle? the following html and css does not display the image you have in your question? – repzero Apr 09 '17 at 05:16
  • Isn't the problem that the image in the middle column is the wrong size? Couldn't you solve it by making it 10 or so pixels shorter? – Andrew Myers Apr 09 '17 at 05:19
  • Given the visual it appears to really be one image repeated on the larger. Set the background image in CSS on the div and set "repeat" true perhaps? `background-repeat: repeat-x; background-image: url("http://www.example.com/bck.png");` – Mark Schultheiss Apr 09 '17 at 16:06

3 Answers3

1

The way I understand it, there is a logical gutter in the center of the middle column. col-6 is not exactly twice the width of col-3. Rather, it is twice the width plus the gutter width (had there been two col-3s instead of a col-6).

Example showing the gutter between each col-3, which should also be included in the width of a col-6

This extra width means that if you merely take the dimensions of a col-3 image and then double the width, the image will have to grow to fit the slightly wider space. This is why it is sticking out a little further.

So, don't worry so much about the CSS. Just use an image of the correct size.

Andrew Myers
  • 2,754
  • 5
  • 32
  • 40
0

Why don't you use these images as background of your divs? As backgrounds you can use cover and these images won't affect the div's sizes.

If it doesn't help, please, create a plunker to let me test with you.

.div-with-bg {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
Raphael Parreira
  • 468
  • 4
  • 14
0

It is due to propositional resize of image in bootstrap grid. It has three possible solutions.

  1. make image size equal to bootstrap grid size by cropping.(so your image in col-6 should be (col-3)*2 + 30px(gutter size)).
  2. Use images in background in div with fixed height and width.
  3. Use dynamic image crop library to keep them equal in size.
kishan
  • 454
  • 3
  • 10