Как сверстать адаптивную «галлерею» 4x4?

Question

[gleendo]

Хочется сверстать вот такую "галлерею", на самом деле это меню. https://dribbble.com/shots/2464148-Main-Page-Anima...

Пробовал, codepen.io/evg_/pen/oLZEaR?editors=0100
Вот сделал вроде как адаптивная, но как сделать чтобы элементы не переносились при помощи медиа запросов, а уменьшались, пропорционально, всегда оставались квадратными?

Как сверстать чтобы было адаптивно все? и по центру.
Как сделать так чтобы при уменьшении экрана, сохранялись пропорции? и была какая то фикс максимальная ширина.

PS. И да, где можно найти примерно такие вот иконки/картинки, желательно в svg?

Comments

[Hyubert]

4х4 Вы адаптив не сделаете, блоки будут очень мали, ни прочитать, ни разобрать что за каринка

[gleendo]

Hyubert: Вот я сделал, сетка меняется и зависит от ширины экрана codepen.io/evg_/pen/oLZEaR,
Но мне хочется просто понять как сделать чтобы уменьшалась и ширина и высота пропорционально. Чтобы всегда элементы оставались квадратными. И да, это можно использовать, например в пределе от очень большой ширины до ширины планшета, это вполне будет уместно, а уже на телефоне менять сетку и выстраивать например в одну колонку со 100% шириной.

[Hyubert]

con_: попробуйте сохранить ширину в перемену , и используйте Calc()

Answer 1

[Денис Букреев]

Иконки и картинки в svg здесь

Answer 2

[AlexanderShustik]

Нужно из li удалить все медиа-запросы и оставить только для ul

Comments

[gleendo]

AlexanderShustik Ну и что это получится? Тогда при изменении размера экрана, будет уменьшая ширина галереи, при чем рывками, так как всего несколько breakpoints, а высота элементов останется прежней. А мне нужно чтобы галерея была "резиновой" чтобы при уменьшении размера экрана, сохранялись пропорции, чтобы всегда галерея оставалась квадратной.