Меняешь высоту в VH, автоматически меняется ширина

Question

У меня есть квадрат, высота которого 80hv. Мне нужно, чтобы она задавала автоматически ширину квадрата. Потому, что если я изменю высоту на 60hv у меня автоматически должна поменяться ширина на такое же значение В данном случае к сожалению такое решение не подходит wigth: 80vh; heiht: 80vh

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

Answer 1

Можно сделать таким образом. Изменяя паддинг можете превращать из квадрата в прямоугольник и т.д. с сохранением пропорций при изменении размеров экрана

Контент внутри данного квадрата должен быть абсолютным иначе не получится!

.cont {
  position: relative;
  width: 80vh;
  background-color: red;
}
.pb-100 {
  padding-bottom: 100%;
}

.text-cont {
  position: absolute;
}

<div class="cont">
  <div class="pb-100">
    <div class="text-cont">
      ...
    </div>
  </div>
</div>

БЛОГ НА HUSL

Меняешь высоту в VH, автоматически меняется ширина

Ответы (1 шт):