CODEWITHSUNDEEP
jqueryhtmlcss
CaribouCode
CaribouCode

Reputation: 14398

Keep same height divs, scaling images but not padding

I have a layout of images in columns with padding between them. I'm trying to make the columns stay the same height so the images line up at the bottom as shown in this image: enter image description here

The issue is, in different screen sizes, the images (set to width:100%;) scale, but the padding MUST stay at 15px, so this doesn't scale. The widths of the columns will have to change to make the heights work.

I've concluded that this cannot be done in css so I've tried it with jQuery:

HTML

<div class="row">
  <div class="eHeightStacked">
    <img src="image.jpg" />
    <img src="image.jpg" />
    <img src="image.jpg" />
  </div>
  <div class="eHeightSingle">
    <img src="image.jpg" />
  </div>
</div>

jQuery

var eRatio1 = $('.eHeightStacked').height() / $('.eHeightStacked').width(),
    eRatio2 = $('.eHeightSingle').height() / $('.eHeightSingle').width(),
    rowWidth = $('.row').width();       

var eWidth1 = eRowWidth*eRatio2 / (eRatio1+eRatio2), 
    eWidth2 = eRowWidth-eWidth1;

$('.eHeightStacked').width( Math.round(eWidth1) );
$('.eHeightSingle').width( Math.round(eWidth2) );

This always puts the heights a few pixels out. Anyone know a good solution?

Upvotes: 0

Views: 135

Answers (1)

Ecropolis
Ecropolis

Reputation: 2025

Could you set your overflow to hidden in CSS and fudge the pixels in favor of hiding a some of the edges?

Upvotes: 1

Related Questions