任何大小的动态矩形或正方形 div，可以装入固定大小的 div [关闭]答案

【问题标题】：dynamic rectangular or square div of any size which can be fitted into a fixed size div [closed]任何大小的动态矩形或正方形 div，可以装入固定大小的 div [关闭]
【发布时间】：2019-12-01 00:44:36
【问题描述】：

我想通过改变 div 的宽度和高度来改变它的形状，他的宽度和高度可能是 3000*5000 但它可以显示在 400*400 的 div 中......如果你想显示的例子相同的类型然后访问https://konfigurator.stylegreen.de/dimensions?language=EN 并通过选择其中一个进入（尺寸选项卡）第三种形式选项卡.. 并在宽度和高度上输入任意数字，它将显示在特定区域中。 .

【问题讨论】：

使用 JavaScript，设置两个输入的 onChange 事件，并使用这些值设置 div 宽度/高度

标签： javascript jquery css

【解决方案1】：

都是关于ratio。您需要计算rectange width & frame width 之间的比率。

示例代码在这里..

function renderBox() {

  const width = document.getElementById('width').value;
  const height = document.getElementById('height').value;
  const box = document.getElementById('box');
  
  let scale = 1;
  
  while(true) {
      if (width <= (400 * scale) && height <= (200 * scale)) {
      break;
      }
      scale++;  
  }
  
  box.style.width = width / (400 * scale) * 100 + '%';
  box.style.height = height / (200 * scale) * 100 + '%';
  
  document.getElementById('top').innerText = (200 * scale) + "px";
  document.getElementById('end').innerText = (400 * scale) + "px";
  
}

.container {
  margin-top: 20px;
  width: 400px;
  height: 200px;
}

.frame {
  background-color:rgb(200,200,200);
  width: 100%;
  height: 100%;
}

.scale #start {
  float:left;
}

.scale #end {
  float:right;
}

.scale #top {
  position: absolute;
  top: 0px;
  left: 10px;
}

#box {
  background-color: red;
  position: relative;
  top: 100%;
  transform:translateY(-100%);
  left: 0;
}

<div class='container'>
 <div class='frame'>
    <div id='box'></div>
 </div>
 <div class='scale'>
    <span id='top'>200px</span>
    <span id='start'>0px</span>
    <span id='end'>400px</span>
 </div>
</div>

<br><br>

width: <input type='number' id='width'> <br><br>
height: <input type='number' id='height'> <br><Br>
<button onclick='renderBox()'>Render</button>

【讨论】：