Как создать "резиновый" квадрат в css

Question

Требуется создать CSS-квадрат, отвечающий следующим требованиям:

Сохранение пропорций:
Квадрат должен оставаться квадратом при любых
размерах окна браузера;

Центрирование:
Квадрат должен быть расположен строго по центру
окна как по горизонтали, так и по вертикали;

Ограничение размеров:
Квадрат не должен выходить за границы окна и не
должен вызывать появление полос прокрутки;

Внешние отступы:
Между краями квадрата и краями окна должны быть
внешние отступы;

Относительные единицы:
Для задания размеров и отступов необходимо
использовать только относительные единицы (%, vw, vh и т.д.)

Если реализовать такую задачу исключительно с помощью HTML и CSS невозможно, прошу предложить альтернативные решения.

Спасибо за помощь!

Answer 1

:root {
  --offset-x: 10vw;   /* отступ по горизонтали */
  --offset-y: 10vh;   /* отступ по вертикали */
}

html,body{
  height: 100%;   /* оба (html, body) делаем в 100% высоты */
  margin: 0;      /* это для того, чтобы body не создавал
                         прокрутку при height: 100% */
  display: grid;  /* для body, чтобы заработал place-content */
  place-content: center;  /* Отображать содержимое по центру */
}

.rect {
  border: 1em solid yellow;
  background: red;
  aspect-ratio: 1 / 1;   
  /* Старый приём, работает во всех браузерах:
      ставим нужные width и height */
  width:      calc(100vw - 2 * var(--offset-x));
  height:     calc(100vh - 2 * var(--offset-y));
  /* А потом прописываем те же max-width и max-height, 
     только меняем их местами */ 
  max-width:  calc(100vh - 2 * var(--offset-y));
  max-height: calc(100vw - 2 * var(--offset-x));
}

<div class="rect"></div>

Answer 2

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
}

div {
  width: calc(100vmin - min(10%, 10em));
  aspect-ratio: 1;
  margin: auto;
  background: silver;
}

<div></div>

Answer 3

body {
  margin: 0;
  display: flex;
  min-height: 100dvh;
}

.square {
  margin: auto;
  width: 50vmin;
  aspect-ratio: 1;
  background-color: darkblue;
}

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

БЛОГ НА HUSL

Как создать "резиновый" квадрат в css

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