0

我在列中有一个图像布局，它们之间有填充。我正在尝试使列保持相同的高度，以便图像在底部排列，如下图所示： 在此处输入图像描述

问题是，在不同的屏幕尺寸下，图像（设置为width:100%;）会缩放，但填充必须保持在 15 像素，因此不会缩放。必须改变列的宽度才能使高度起作用。

我已经得出结论，这不能在 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) );

这总是将高度放在几个像素之外。有谁知道一个好的解决方案？

4

1 回答 1

1

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

于 2013-08-09T13:30:15.150 回答