CSS группа / отображать изображения по соотношению сторон

Question

Мне нужна помощь с кодом CSS. Я работаю на фото-сайте WordPress, и у меня есть некоторые проблемы с отображением моих фотографий. Отображаются 2 формата изображений: пейзаж (1200 x 800 пикселей) и портрет (595 x 853 пикселей). Я хочу сгруппировать высокие 2 в ряду, потому что они выглядят намного лучше. У меня есть около 40-50 изображений на пост.

Есть какой-либо способ сделать это?

Я приложил демо о том, как бы я хотел, чтобы результат был.

Спасибо!

Answer 1

Это зависит от того, насколько динамичны ваши сообщения. Если у вас есть способ узнать структуру вашего HTML + CSS + контента заранее, тогда вы можете создать .tall-row класс для высоких изображений и .long-row класс для длинных изображений. И это в основном планирование макета заранее. Вы можете легко сделать это, используя традиционный CSS, CSS FlexBox (новее) или CSS Grid (новее).

Если порядок изображений будет каким-то динамическим (поэтому вы не знаете, когда будет отображаться высокое изображение или когда будет длинное изображение), вы можете попробовать CSS Grid'd. grid-auto-flow: dense; свойство, которое пытается рассчитать наилучшее общее соответствие для всех его детей. Только если это не сработает, я бы предложил использовать плагин JS или jQuery.

Вот пример CSS Grid grid-auto-flow: dense; https://jsfiddle.net/40p0q5xx/

Answer 2

Вы можете использовать плагин jQuery, такой как Masonry или Isotope, чтобы сделать это - они предназначены для размещения ваших элементов в сетке так, чтобы они хорошо подходили друг к другу.

Вам все еще нужно будет установить некоторые HTML и CSS перед добавлением плагина, чтобы отрегулировать положение изображений, поэтому вам придется поработать с документацией или примерами плагина (или предоставить фрагмент кода).