Как сжать квадрат?

Question

Есть квадратный блок 600x600px. Нужно его сжимать при уменьшении ширины окна браузера, чтобы одновременно уменьшалась ширина и высота квадрата. Нужно чтобы пи сжатии получился квадрат 200x200px. Как это реализовать с помощью единиц измерения vw,vh,px и функцией calc()? Что-то наподобие такого(calc((100vw - 35px) / 733 * 492))

Answer 1

Всё, что нужно для реализации, уже давно придумали:

body { margin: 0; }

.square {
  max-width: 600px; min-width: 200px; width:100vw;
  max-height: 600px; min-height: 200px; height:100vw;
  box-shadow: inset 0 0 0 10px #808;
}

<div class="square"></div>

Можно использовать aspect-ratio (но, нужно дождаться нормальной поддержки браузерами):

body { margin: 0; }

.square {
  max-width: 300px; min-width: 200px; width:100vw;
  aspect-ratio: 1 / 1;
  box-shadow: inset 0 0 0 10px #808;
}

<div class="square"></div>

БЛОГ НА HUSL

Как сжать квадрат?

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