пропорциональное уменьшение квадрата

103

13 сентября 2021, 10:30

добрых времени суток, появилась задача пропорционально уменьшить квадрат, размерами 50x50, не пойму как это можно сделать? (через media не вариант, т.к. будет куча брейкпоинтов), можно ли как-то через transform: scale()?

ставить width через vw и JS приравнивать высоту к ширине тоже не вариант.

заранее спасибо за подсказки!

.square { 
  border: 1px solid black; 
  width: 50px; 
  height: 50px; 
}

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

Answer 1

Например, можно это сделать при помощи абсолютного позиционирования и паддинга сверху (или снизу)

.container { 
  max-width: 50px; 
} 
 
.inner { 
  position: relative; 
  height: 0; 
  padding-top: 100%; 
} 
 
.square { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: tomato; 
}

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему функция не принимает файл? C++

Хочу организовать фукнцию, которая из открытого файла читала бы аргументы и записывала их в существующую матрицу, но почему-то функция не принимает...

121

c++

C++, RVO, NRVO и локальные статические объекты

Рассмотрим следующий код:

104

c++

Как подключить базу данных mySQL с помощью С++

Я пытаюсь подключить базу данных с моего сайта и отображать некоторые строки с помощью С++Поэтому я стараюсь сделать приложение, которое...

c++

Как обратиться к глобальной переменной из функции

Как обратиться к глобальной переменной из функции в которой уже имеется переменная с таким же названием? Допустим есть программа

147