Как сохранить сетку размером 4 x 2 с разным размером изображений с помощью Bootstrap

У меня есть grid размером 4 x 2 с изображениями продукта и некоторый текст, накладывающий изображение. Проблема в том, что изображения будут иметь разные отношения.

То, что имеет тенденцию, состоит в том, что если одно изображение значительно выше, чем остальное, оно будет вытеснять другие изображения из выравнивания. Я пытаюсь найти способ сохранить все ящики одинаковой высоты, с текстом в одном и том же месте на каждом изображении, при этом просто масштабируется изображение, чтобы оно соответствовало.

Это также отзывчиво, поэтому, пожалуйста, увеличьте окно предварительного просмотра на jsfiddle, чтобы увидеть вопрос, который у меня есть.

В этом примере я использовал правильные размеры изображения.

JSFiddle: https://jsfiddle.net/w533z8Lg/3/

EDIT: удаление max-height:292px и просто с height:292px для изображений работает с точки зрения макета, но меньшие изображения растянуты до этой высоты, а изменение размера не поддерживает соотношение сторон.

EDIT 2: Я нашел этот JSFiddle, который был решением для кого-то другого с той же проблемой, я постараюсь это понять. http://jsfiddle.net/ETkkR/7/

HTML:

  

CSS:

 .featured_product { padding-left:10px; padding-right:10px; margin-bottom:15px; } .featured_products div.padding { padding:5px 10px; } .featured_products div.padding div.border { border:1px solid #EAEAEA; } .featured_products div.padding div.border div.innerpadding { padding:5px; text-align:center; width:100%; } .featured_products div.padding div.border div.innerpadding img { max-height:292px; display:inline-block; } span.featured_product_title { position: absolute; bottom:6px; left: 0; width: 100%; background-color:RGBa(255, 255, 255, 0.6); vertical-align:center; line-height:50px; height:50px; color:#46436f; font-weight:bold; font-size:1.3em; } 

Вы не можете сделать все изображения одинакового размера без отключения.

Что вы можете сделать, это добавить необходимое ясное исправление для элементов, для каждого размера, на который вы нацеливаете. Это заставит их оставаться в правильной сетке. Bootstrap нацеливается на три точки останова.

Демо: http://jsfiddle.net/w533z8Lg/5/

 @media (min-width: 768px) { .featured_products .item:nth-child(2n+1) { clear: both; } } @media (min-width: 992px) { .featured_products .item:nth-child(2n+1) { clear: none; } .featured_products .item:nth-child(3n+1) { clear: both; } } @media (min-width: 1200px) { .featured_products .item:nth-child(3n+1) { clear: none; } .featured_products .item:nth-child(4n+1) { clear: both; } } 

Раньше у меня была эта проблема с проектами, над которыми я работал. То, что я закончил, было использование библиотеки масонства в сочетании с Bootstrap. http://masonry.desandro.com/ . Мои условия состояли в том, что соотношение сторон должно было оставаться, они должны были иметь одинаковую ширину, и я знал, что высоты будут непредсказуемыми.

Конечно, он не держит все в прямой горизонтальной линии, но он уверен, что устраняет огромные пустые белые пространства, о которых вы говорите.