我试图制作一个小工具来绘制和重叠不同大小的框。用户将以英尺为单位输入他们的尺寸，我会将所有尺寸乘以 50px 以获得每个框的正确纵横比。但是，不会为每个框维护方面。看起来外框(绿草，来自宽度/长度形式的输入)有某种填充，这会弄乱它与从下拉列表(粉红色的花)中选择的框大小的比例。
应该发生的情况是，如果我分别在宽度/高度框中输入 4 和 6，并从下拉列表中选择 4x6，那么这些框的大小应该完全相同，我应该只会看到粉红色的花朵。但是，外部绿色框更大。
function draw() {
var width = document.getElementById("wid").value;
var height = document.getElementById("hgt").value;
var box = document.getElementById("boxSize").value;
//updateForm(width, height, box);
switch(box) {
case 'three-two':
document.getElementsByClassName("inner")[0].style.width = 3 * 50;
document.getElementsByClassName("inner")[0].style.height = 2 * 50;
break;
case 'four-six':
document.getElementsByClassName("inner")[0].style.width = 4 * 50;
document.getElementsByClassName("inner")[0].style.height = 6 * 50;
break;
case 'five-seven':
document.getElementsByClassName("inner")[0].style.width = 7 * 50;
document.getElementsByClassName("inner")[0].style.height = 5 * 50;
break;
default:
break;
}
document.getElementsByClassName("outer")[0].style.height = height * 50;
document.getElementsByClassName("outer")[0].style.width = width * 50;
}input[type=number], select{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
background-color: white;
font-size: 18px;
font-weight: 200;
}
div.container {
width: 200px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 0 auto;
}
button {
width: 100%;
background-color: #417da6;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.box-container {
margin: 0 auto;
text-align: center;
}
.inner-box {
display: inline-block;
}<html>
<body>
<div class="container">
<div class="form-container">
<form id="areaform">
<label for="wid">Width:</label>
<input id="wid" type="number">
<label for="hgt">Length:</label>
<input id="hgt" type="number">
<label for="boxSize">Rug Size</label>
<select id="boxSize" Box="boxSize">
<option value="three-two">3x2</option>
<option value="four-six">4x6</option>
<option value="five-seven">5x7</option>
</select>
<button onclick="draw()" type="button">Draw Boxes</button>
</form>
</div>
</div>
<div class="box-container">
<div class="inner-box">
<div class="outer" style="display: flex;
justify-content: center; align-items: center; background-image: url('http://ritenourequipment.com/wp-content/uploads/2017/01/grass.jpg'); -webkit-transform: rotate(-90deg);margin:50px;">
<div class="inner" style="z-index: 100; background: url('https://images.unsplash.com/photo-1437275537121-331a0457c8d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') no-repeat center;-webkit-background-size: contain;moz-background-size: contain;o-background-size: contain;background-size: contain;"></div>
</div>
</div>
</div>
</body>
</html>关于我可能做错了什么的任何想法？我确定它正盯着我的脸!
它似乎没有显示我在代码片段中绘制的框，不确定那里发生了什么。它适用于我的浏览器。
**已编辑。我是个白痴。图片搞砸了尺寸。我想我可以添加编辑以用我可以为每个图像制作的正确比例/大小的图像填充 div。
最佳答案
这似乎是一个 CSS 问题而不是 JS - 您在外部 Div 的样式属性中有 50px 的填充
关于javascript - 使用 Javascript 计算的尺寸以绘制 Div 框已关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54790325/