Масштабировать элемент

Question

.gl {
  background: green;
  width:1000px;
  height: 500px
}

.gl div {
  background: blue;
  width:50px;
  height: 30px
}

<div class='gl'>
  <div></div>
</div>

Размеры высоты и ширины дочернего блока, фиксированы. Могут быть совершенно разные, блок может быть больше тех размеров которых необходимо придерживаться...

Вопрос в том, как через javascript. Рассчитать число для

transform: scale(*)

Число может быть отрицательным, когда необходимо уменьшить размер или наоборот положительным когда необходимо увеличить синий блок.

Необходимо привести синий блок к ширине в 10% от родителя, либо к 250px по высоте. В том случаи если при ширине в 10% высота будет превышать 250px...

Размеры синего блока, высота и ширина могут быть абсолютно разными и они не изменямы. Чтобы изменить размер, необходимо менять через scale. Для которого необходимо рассчитать число.

Собственно, как это выполнить?

Answer 1

Сдаётся мне, что пытаясь описать подробно вашу проблему, вы слегка перестарались и всех нас запутали.) Если я правильно понял, то единственное полезное, что можно вынести из вашего вопроса, так это то, что в зависимости от ширины наружного блока:

внутренний блок должен сохранять свои пропорции и составлять 10% от ширины родителя.
реализовать это нужно при помощи javascript и transform: scale(*)

Что вам нужно и полезно знать, так это то, что css-свойство scale никак не сказывается на реальном размере элемента clientWidth в js, а работает лишь для отображения.

Для решения задачи нам нужно получить 1/10 размера родителя, что и есть нужные нам 10%. Остаётся лишь узнать как соотносятся 50px к нужной нам величине. Для чего мы и делим размер одну десятую часть родителя на размер ребёнка.

Дабы упростить вам визуальное представление и код в чистом виде:

const gl = document.querySelector('.gl');
const child = document.querySelector('.child');
// gl.clientWidth/10 — вычисляем 1/10 от размера родителя и делим на размер ребёнка 
let size = (gl.clientWidth/10) / child.clientWidth;

// размеры родителя
console.log( '.gl:', gl.clientWidth, 'x' , gl.clientHeight );
// размеры дочернего элемента, если применить к нему вычисленный "transform"
console.log( '.child:', child.clientWidth * size, 'x' , child.clientHeight * size );

// IF размер дочернего элемента превышает высоту родителя подстроить 'size' под высоту (сделаем его, например, на 4px меньше )
if(child.clientHeight * size > gl.clientHeight) {
  size = (gl.clientHeight-4) / child.clientHeight;
  console.log( '.child new:', child.clientWidth * size, 'x' , child.clientHeight * size );
}

child.textContent = `${size}`
child.style.transform = `scale(${size})`;

.gl {
  background: green;
  width: 1000px;
  height: 40px;
}

.gl div {
  background: blue;
  width: 50px;
  height: 30px;

  transform-origin: left top; /*масштабировать от верхнего левого угла*/
  color: #ddd;
  text-align: center;
}

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

С учётом запутанности в формулировках и не будучи до конца уверенным, остановимся пока на этом.

UPD: с учётом пожеланий добавил условие на то, чтобы в случае превышения высоты ребёнка над родителем ребёнок уменьшался под высоту.

БЛОГ НА HUSL

Масштабировать элемент

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