Как можно грамотно решить вопрос адаптивности этого блока?

Question

[deleted-LocCodE]

Сверху прикрепил изображение. Эта картинка - блок, который по идее должен внутри каждого слота содержать в себе картинки размеров 64х64 пикселя (спелы персонажей). Проблема с адаптивностью.

Как можно сделать верстку такой, чтобы при уменьшении/увеличении разрешения, слоты располагались с учетом разрешения экрана (вытягивались либо ширину, либо в высоту)

Answer 1

[Habetdin]

Flexbox?

Comments

[deleted-LocCodE]

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

[Habetdin]

LocCodE: с какими именно углами проблема?

[deleted-LocCodE]

Habetdin: посмотрите внимательно на картинку. Мне нужно сверстать именно их и там есть рамка, которая закруглена (она тоже картинкой)

[Habetdin]

LocCodE: тогда разве что так: Result (Source)

[deleted-LocCodE]

Habetdin: спасибо вам огромное! Я действительно протупил. Версткой нужно постоянно заниматься, иначе скилл тупо теряется. Спасибо еще раз огромное!

Answer 2

[Александр Таратин]

jsfiddle.net/QW01_01/jc258q6p
Хотя я наверное не понял вопроса

Comments

[deleted-LocCodE]

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