Как сделать блоки одинаковой высоты и ширины в одном ряду при любой ширине блока?

Question

[Cheizer]

Приветствую, подскажите пожалуйста, как сделать блоки одинаковой высоты и ширины при изменении ширины экрана?
Что бы пропорционально уменьшались без переноса на вторую строку.

Comments

[Ankhena]

Задать им ширину в %
А высоту хаком с паддингом
https://jsfiddle.net/Ankhena/cLhxv7eq/
Или любым другим https://habr.com/ru/post/542212/

[Cheizer]

Ankhena, спасибо, попробую вашим с паддингом и псевдоэлементом, aspect-ratio сыроват еще.

Answer 1

[Андрей Мартынкевич]

Вот мои примеры реализации:
1)Минимальная ширина 75px
2)Минимальная ширина + высота зависит от ширины круга
Можно ширину указать в %,тогда кнопка будет иметь flex: 0 0 20%, а можно указать минимальное значение(Например 75px).

Comments

[Cheizer]

но у вас в примерах ширина и высота изначально разные и блоки не уменьшаются при изменении ширина родителя :)

[Андрей Мартынкевич]

Cheizer, Хммм, а вот так? https://jsfiddle.net/d01htpjb/1/

[Cheizer]

Андрей Мартынкевич, так опять всегда разная ширина и высота, не круг.

[Андрей Мартынкевич]

Cheizer, Извиняюсь, я изначально не правильно понял ваш вопрос :) Вот пример с шириной в % и высоте прямо пропорционально ширине https://jsfiddle.net/4qvg67Lr/31/. Я вижу решение только через position: absolute, т.к по другому никак пропорция не сохраняется из-за фиксированной высоты шрифта.

[Cheizer]

Андрей Мартынкевич, Спасибо! Вроде то что надо.

Answer 2

[Cheizer]

Решил на jquery, на css пока не получается

$('.round-button').height($('.round-button').width());
        $(window).resize(function(){
          $('.round-button').height($('.round-button').width());
        });

Answer 3

[Softlink]

Можно использовать новое aspect-ratio с фоллбеком до хака с паддингом https://jsfiddle.net/4kopLx87/

Comments

[Cheizer]

Спасибо, но aspect-ratio мало где еще поддерживается :(

[Softlink]

Cheizer, так если он не поддерживается, то сработает хак с паддингом, он в комплекте.