jquery - 保持相同的高度 div，缩放图像但不填充

Question

我在列中有一个图像布局，它们之间有填充。我试图使列保持相同的高度，以便图像在底部排列，如下图所示:

问题是，在不同的屏幕尺寸下，图像(设置为 width:100%;)会缩放，但填充必须保持在 15px，所以这不会缩放。必须更改列的宽度才能使高度正常工作。

我得出结论，这不能在 css 中完成，所以我用 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) );

这总是使高度超出几个像素。有人知道好的解决方案吗？

Answer 1

您能否在 CSS 中将溢出设置为隐藏并捏造像素以隐藏一些边缘？