主页 / 问题 / 1598914
Accepted
Лена
Asked:2024-11-05 21:49:09 +0000 UTC2024-11-05 21:49:09 +0000 UTC

刻度元素

  • 772

.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来改变。您需要计算其数量。

实际上，如何做到这一点？

javascript

1 个回答

  1. Best Answer

    在我看来，在试图详细描述你的问题时，你有点做得过头了，让我们所有人都感到困惑。）如果我理解正确，那么可以从你的问题中取出的唯一有用的东西是，取决于室外机：

    1. 内部块必须保持其比例并且为父级宽度的 10%。
    2. 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：考虑到愿望，我添加了一个条件，如果孩子的身高超过父母，则孩子会降低到相同的高度。

    • 1

相关问题