CSS 强制流体网格内的图像使用 IceCream 调整到父高度答案

【问题标题】：CSS Force images inside fluid grid to adjust to parent height with IceCreamCSS 强制流体网格内的图像使用 IceCream 调整到父高度
【发布时间】：2014-05-03 21:35:40
【问题描述】：

我正在为需要包含一些图像的流体网格的客户开发一个项目。到目前为止，我一直在使用 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解决这个问题？

【问题讨论】：

标签： css html fluid-layout

【解决方案1】：

假设您希望所有图片的高度为250px。拍摄每张图像并找到高度/宽度。数学来了。美国Proportion Calculator。所以它是左边部分中原始宽度上的原始高度和右边部分中x 上的 250。计算器会给你宽度。这将保持图像的比例，但只是小了几个像素。

*重要的是不要将标签（如px）放入计算器。它正在尝试求解x，即按比例缩小的图像的宽度。

所以现在你有了这些数字说<image height="250px" width="(the width)">

【讨论】：