CODEWITHSUNDEEP
twitter-bootstrap
sunscreem
sunscreem

Reputation: 626

Bootstrap Grid - Images not aligning at different breakpoints

I've a client who wants three images to sit in a simple layout which is working perfectly on mobile:

http://www.boutiquebeautyaberdeen.com/img/mobile.png

On a desktop size they are a few pixels out.

http://www.boutiquebeautyaberdeen.com/img/desktop.png

(Stack Overflow wont let me just post the images yet)

      <div class="row">
        <div class="col-xs-6 col-lg-6">
           <img src="http://placehold.it/300x200" class="img-responsive"><br>
           <img src="http://placehold.it/300x200" class="img-responsive">
        </div>
        <div class="col-xs-6 col-lg-6">
           <img src="http://placehold.it/300x425" class="img-responsive">
        </div>
      </div>

Is this just my lack of understanding of the bootstrap grid system? Or should I be using something like flexbox to achieve this?

Upvotes: 1

Views: 286

Answers (2)

isherwood
isherwood

Reputation: 61063

It appears to be a matter of math rounding. Since the images are scaled for mobile, partial pixel values must be rendered as whole pixels.

http://jsfiddle.net/isherwood/ut4w64q8

required code that's not really code

Upvotes: 0

janwschaefer
janwschaefer

Reputation: 609

This can happen due to rounding errors. Because your columns are not 300 pixels wide, the images are scaled down. This is done pixel-wise for the width of the image, the height adapts depending on the aspect ratio of the image. So if you have images with different aspect ratios, it is not guaranteed the scaled versions will end up with a matching height.

Example

An image with aspect ratio 1:3 will scale 3 pixels in height for each pixel in width.

An image width aspect ratio 1:2 will scale only 2 pixels in height for each pixel in width.

So changing the width of the columns by one pixel will make the resulting heights differ, if they were aligned before.

You can not do much about this, if your layout is fluid. If it is static, you can for example adapt the column widths to values that make a match for the given aspect ratios. Another option might be to adapt the margin between the images on the left in order to add the missing pixel(s).

Upvotes: 1

Related Questions