Как оставить квадратные изображения?

Question

[montpellier]

В общем есть такой макет

макет

Как при уменьшении разрешения монитора,
1) сохранить соприкосновение верхнего блока изображений с нижним изображением(углы соприкасаются);
2) пространство между картинками в блоке с картинками сильно не увеличивалось;
3) соприкосновение блока картинок, с предыдущим блоком.
Я уже как только не пробовал, но мне кажется это невозможно, ведь при уменьшении разрешения текст будет сужаться, высота будет увеличиваться, значит какой-то из пунктов все равно поедет.

Comments

[Алексей Дубровин]

А в чём проблема? Я немного не понимаю, в чём трудность то?

[montpellier]

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

[Ankhena]

montpellier,

трудность в сохранении всех 3 пунктов

Я бы удивилась, если бы у вас получилось.

Такие штуки возможны при четко выверенных размерах и хорошо подобранном тексте.

В тот момент, когда всё ломается, нужно просто перестраивать композицию по-другому. Или обрезать текст или соглашаться с изменением пропорций или с увеличивающимся расстоянием между строками картинок и т.д.

[montpellier]

Ankhena, Вот я абсолютно также думаю

Answer 1

[Александр]

Лучше всего при маленьком разрешении всё делать в одну колонку.

Comments

[montpellier]

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

[Александр]

montpellier, Ну уберите контейнер и при помощи гридов всё настройте.

[montpellier]

Александр, В общем проверил, это не решает мою проблему, у Вас так как текста мало, оно уменьшается, но у меня изначально там почти весь блок заполнен текстом и соответственно высота увеличивается и изображения становятся прямоугольными

[Александр]

montpellier, Разбивайте текст. Регионов больше нет в CSS.