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。拍摄每张图像并找到高度/宽度。这是数学。美国Proportion Calculator。因此，它将是左侧分数中原始宽度的原始高度，右侧分数中的原始高度为250 x。计算器会给你宽度。这样可以保持图像的比例，但只需要几个px。

*重要的是不要将标签（如px）放入计算器中。它试图解决x，比例较小的图像的宽度。

现在您已将这些数字说成<image height="250px" width="(the width)">

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

1 个答案: