CSS使用IceCream强制流体网格中的图像调整为父高度

Question

我正在为一个客户做一个项目，这个项目需要一个流体网格，里面有一些图像。到目前为止，我一直在使用Icecream Grid (http://html5-ninja.com/icecream/)，没有额外的css，只使用定制类通过JQuery选择元素。下面的代码可以处理一些测试图像：

<div id="ProductsGrid" class="i-g">
     <div class="grid-element i-4">
         <div class="element-image i-img"><img src="..."></div>
         <div class="element-label"></div>
     </div>
</div>

问题是，客户想要使用的图像不具有相同的高度，因此，虽然网格元素确实调整为相同的宽度，但它们具有不同的高度。我如何用css解决这个问题呢？

Answer 1

假设您希望所有图像都是高度为250px的图像。获取每张图像并找出高度/宽度。这就是算术。Usa a Proportion Calculator.因此，在左侧分数中，它将是原始高度除以原始宽度，在右侧分数中，它将是250除以x。计算器会给你宽度。这将保持图像的比例，但只是较小的几个像素。

*不要将标签(如px)放入计算器，这一点很重要。它正在尝试解决x，比例较小的图像的宽度。

现在你有了这些数字，就是<image height="250px" width="(the width)">