Что делать с дробными размерами?

Question

[Евгений Самсонов]

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


Пробовал округлять размеры, но всё-равно вылазят разные штуки, к примеру такие:


Как это можно побеждать?

Comments

[Dark Hole]

В чем проблема? Крутизна - это не по части кода

[Евгений Самсонов]

В неопрятности внешнего вида :(

[Dark Hole]

Евгений Самсонов: я не вижу разницы между 1 и 2 картинками. Неопрятности тоже не вижу.

[Alexander]

Евгений Самсонов: Вы хотите чтобы картинки по 3 шт были в ряд ?

[Виталий Инчин ☢]

Dark Hole: +

[Евгений Самсонов]

Ребят, вы что серьезно не видите, что в одном месте 1 пиксель между картинками, а в другом 2?

[copal]

Евгений Самсонов: вообще не понятно почему Вы не знаете ответа.. На вскидку квадраты у Вас правильные, то есть Вы слышали о размерах кратные степени двойки. Слышали ведь?
Теперь только остается убрать адаптивность и задавать размеры фиксированными, чтобы не получалось не целых координат. То есть то что у Вас на картинке, это вполне нормальный рендер с нецелыми координатами и величинами.

[Евгений Самсонов]

Проблема с округлением состоит в том, что для разных размеров 3*3, 2*2, 1*1 это самое округление может быть разным и возникнет ситуация как на нижней картинке. то есть ширина 1*1 + 1*1 != 2*2. Или я чего-то не понял из вашего сообщения? Каким образом определить ширину ровным пикселем, если средний квадрат будет к примеру 25 пикселей, тогда нижние 2 никогда не встанут ровно, тоже самое и для большого и среднего. Самый простой вариант, который я вижу это приводить сначала самый большой квадрат к ближайшему кратному 6, но тогда по высоте этот блок будет не всегда заполняться красиво.

[Евгений Самсонов]

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

Answer 1

[lnked]

aspect-ratio
aspect-ratio 2

Comments

[Евгений Самсонов]

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

Answer 2

[Владислав]

А плиточки как выводите - display: inline-block ? Если да, то про margin ~ 4px не забыли у них? Обнулите их или отрицательным margin или font-size: 0 и выставьте border или margin для задания отступа