保持相同的高度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中并且捏造像素以支持隐藏一些边缘吗？