Как сделать пропорциональное уменьшение блока при position: absolute?

Когда вы используете свойство position: absolute для задания позиционирования блока в HTML, его размеры не будут автоматически пропорционально изменяться. Однако, существует несколько способов достичь пропорционального уменьшения блока при использовании position: absolute. Рассмотрим их подробно:

1. Использование процентного значения для ширины и высоты: Вы можете задать ширину и высоту блока с использованием процентных значений, чтобы они масштабировались пропорционально относительно родительского элемента. Например:

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
  width: 500px;
  height: 500px;
}

.child {
  position: absolute;
  width: 50%; /* задаем 50% от родительской ширины */
  height: 50%; /* задаем 50% от родительской высоты */
  background-color: red;
}

В этом случае, если родительский блок имеет размеры 500px на 500px, то дочерний блок будет иметь размеры 250px на 250px (половина от размера родительского блока).

2. Использование transform: scale(): С помощью свойства transform: scale() вы можете масштабировать размеры блока пропорционально. Например:

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
  width: 500px;
  height: 500px;
}

.child {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  transform-origin: top left; /* задаем точку начала масштабирования */
  transform: scale(0.5); /* уменьшаем блок в 2 раза */
}

В этом случае, размеры дочернего блока будут уменьшаться в 2 раза относительно родительского блока.

3. Использование JavaScript: Если вам нужно более сложное пропорциональное управление размерами блока, можете использовать JavaScript. Например:

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
  width: 500px;
  height: 500px;
}

.child {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
}

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
const scaleFactor = 0.5; /* масштабирование в 2 раза */

function resizeChild() {
  const parentWidth = parent.offsetWidth;
  const parentHeight = parent.offsetHeight;
  
  child.style.width = parentWidth * scaleFactor + 'px';
  child.style.height = parentHeight * scaleFactor + 'px';
}

window.addEventListener('resize', resizeChild);
resizeChild(); /* вызываем функцию для начальных размеров */

В этом случае, JavaScript будет рассчитывать размеры дочернего блока на основе размеров родительского блока и масштабного коэффициента.

В итоге, у вас есть несколько способов достичь пропорционального уменьшения блока при использовании position: absolute. Выбор подходящего метода зависит от ваших требований и контекста вашего проекта.