JustAndew
@JustAndew

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

Подскажите, пожалуйста, как сделать, чтоб при сжатии блока уменьшалась не только ширина, но и высота флекс элемента?
т.е., например, есть квадратный элемент, и если уменьшилась ширина на 10рх, то и высота.
5f2849b9e8e98318943827.png
5f2849bfdf6ce507841458.png
  • Вопрос задан
  • 539 просмотров
Пригласить эксперта
Ответы на вопрос 1
Raxen
@Raxen
Lead Frontend Developer, Beeline
Квадратный блок на CSS можно достичь несколькими хаками, самый, как мне кажется простой - это сделать паддинг в 100% по высоте у псевдоэлемента. Есть еще вариант с подкладкой квадратного элемента свг и растягиванием по ширине контейнера, а контент делать абсолютным по отношению к родителю с свг, но псевдоэлемент проще

.elem {
  ...
  position: relative;
}

.elem::before {
  content: '';
  display: block; 
  height: 100%;
  padding-top: 100%;
}


Ну и реализация с свг и картинкой https://codepen.io/irodger/pen/ZydPoZ (изменяйте экран кодпена, чтоб убедиться в адаптивности квадрата)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы