Scale, увеличить либо уменьшить блок, привести ширину блока к 10%

Question

Есть родительский блок и дочерний. Ширина родительского 653px. Ширина дочернего блока, может быть 5px, либо 300px. Рандомная...

Как будет выглядеть формула на javascript, которая отдаст значение для css свойства transform:scale(*), применив которую, ширина дочернего блока будет равна 10% от ширины родителя.

Answer 1

Не знаю как насчёт scale, просто указывая ширину хорошо получается, если конечно задача не стоит сделать чисто через scale.

let wrapper = document.querySelector('.wrapper');
let block = document.querySelector('.inner-block');

wrapper.addEventListener('click', function(){
  block.classList.toggle("inner-10");
});

.wrapper {
  background-color: green;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.inner-block {
  background-color: red;
  width: 100%;
  height: 100%;
  transition: 0.3s;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 16px;
}
.inner-block p {
  font-size: 1rem;
}
.inner-block.inner-10 {
  transform: scale(0.1);
}

<div class="wrapper">
  <div class="inner-block">
    <p>Нажми на меня</p>
  </div>
</div>

Answer 2

Формула простейшая:


653 / 10 = 65.3 (10% ширины родителя, также это целевой размер для потомков)

65.3 /  5  = ⎫
               Q (коэффициент масштабирования)
65.3 / 300 = ⎬
             ⎭

let parent = document.querySelector('.parent-w653');
let small = document.querySelector('.child-w005');
let large = document.querySelector('.child-w300');

function fScaleX(p, c) {
  const Q = p.clientWidth / 10 / c.clientWidth;
  c.style.transform = `scaleX(${Q}`;
  console.log(`Q scaleX для ширины ${c.clientWidth}px = ${Q}`)
}

fScaleX(parent, small);
fScaleX(parent, large);

.parent-w653 {
  display: grid; place-items: center;
  background-color: #fc08; height: 180px; width: 653px;
}
.child-w005 {
  background-color: #0808; height: 40px; width: 5px;
}
.child-w300 {
  background-color: #00d8; height: 40px; width: 300px;
}

<div class="parent-w653">
  5px<div class="child-w005"></div>
  300px<div class="child-w300"></div>
</div>

БЛОГ НА HUSL

Scale, увеличить либо уменьшить блок, привести ширину блока к 10%

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