My challenge lies in creating a layout of images in columns with consistent padding between them. The ultimate goal is to ensure that the images align at the bottom, regardless of screen size variations as depicted in this image:
The problem arises when the images (set to width:100%;) scale on different screens, causing the padding of 15px to remain constant and not adjust accordingly. This requires a change in column widths to maintain consistent heights.
After exhausting CSS options, I turned to jQuery for a solution:
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) );
Despite my efforts, there always seems to be a slight height discrepancy. Does anyone have a viable solution?