主页 / 问题 / 1595912
Accepted
Роман
Asked:2024-10-07 07:30:20 +0800 CST2024-10-07 07:30:20 +0800 CST

缩放、增加或减少块，使块宽度达到 10%

  • 772

有一个父块和一个子块。父级的宽度为 653px。子块的宽度可以是 5px 或 300px。随机的...

javascript 中的公式会是什么样子，它将给出 css 属性的值transform:scale(*)，应用该值，子块的宽度将等于10%父块的宽度。

javascript

2 个回答

  1. 我不知道比例怎么样，只指定宽度就可以了，除非任务应该纯粹通过比例来完成。

    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>

    • 1
  2. Best Answer

    最简单的公式：

    
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>

    • 1

相关问题