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, Возьмите каждое изображение и найдите высоту / ширину. Здесь идет математика. США Калькулятор Пропорции. Таким образом, это будет исходная высота над оригинальной шириной в левой фракции и 250 над x в правильной фракции. Калькулятор даст вам ширину. Это позволит сохранить пропорции изображения, но на несколько пикселей меньше.

* Важно не наносить ярлыки (например, px) в калькулятор. Пытается решить для xширина пропорционально меньшего изображения.

Итак, теперь у вас есть эти цифры говорят <image height="250px" width="(the width)">