javascript - 如何将缩小的div放置在父div的中心内

Question

我目前正在研究放大和缩小功能。

1. 场景如下，有一个主 div，它包括三个子元素 leftside panel、rightside panel 和 wrapperdiv 。

2. 左侧面板和右侧面板都是可折叠的，并且包装器 div 会相应调整。

3. 目标是放大和缩小包装器 div 的内容。我们称之为子div。

4. 我现在面临的挑战是，当我放大时，内容应该粘在wrapper div可用空间的左上角

5. 我面临的第二个挑战是，当我缩小时，子项应该居中到包装器 div 的可用空间中。

let zoomArr = [0.5, 0.6, 0.7, 0.75, 0.8, 0.85, 0.9, 1, 1.2, 1.5];


var element = document.querySelector('.wireframe');
let value = element.getBoundingClientRect().width / element.offsetWidth;

let indexofArr = zoomArr.indexOf(1);
handleChange = () => {
  let val = document.querySelector('#sel').value;
  val = Number(val)
  console.log('handle change selected value ', val);
  indexofArr = zoomArr.indexOf(val);
  console.log('Handle changes', indexofArr)
  element.style['transform'] = `scale(${val})`
}



document.querySelector('.zoomin').addEventListener('click', () => {
  console.log('value of index zoomin is', indexofArr)
  if (indexofArr < zoomArr.length - 1) {
    indexofArr += 1;
    value = zoomArr[indexofArr];
    document.querySelector('#sel').value = value
    element.style['transform'] = `scale(${value})`
  }
})

document.querySelector('.zoomout').addEventListener('click', () => {
  console.log('value of index  zoom out is', indexofArr)
  if (indexofArr > 0) {
    indexofArr -= 1;
    value = zoomArr[indexofArr];
    document.querySelector('#sel').value = value
    element.style['transform'] = `scale(${value})`
  }
})

document.querySelector('.open-left').addEventListener('click', () => {
  var leftPanel = document.querySelector('.left-sidepanel')
  leftPanel.classList.toggle('left-toggle')
})


document.querySelector('.open-right').addEventListener('click', () => {
  var rightPanel = document.querySelector('.right-sidepanel')
  rightPanel.classList.toggle('right-toggle')
})

body {
  background-color: #a3d5d3;
}

.zoom-header {
  display: flex;
}

.zoomin {
  position: relative;
  z-index: 1000;
}

.zoomout {
  position: relative;
  z-index: 1000;
}

.main-container {
  background: #bdaeae;
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.left-sidepanel {
  width: 180px;
  height: 100vh;
  background: #ecf086;
}

.left-toggle {
  left: -180px;
  position: absolute;
}

.right-toggle {
  right: -180px;
  position: absolute;
}

.right-sidepanel {
  width: 180px;
  height: 100vh;
  background: #a4f086;
}

.wireframe-container {
  flex: 1;
  background: #ce6edb;
  overflow: auto;
}

.wireframe {
  width: 100vw;
  height: 100vh;
  background: url('https://wallpaperplay.com/walls/full/b/a/6/190707.jpg') no-repeat;
}

<div class="zoom-header">
  <button class="zoomin">zoom in </button>
  <select id="sel" class="select" onchange="handleChange()">
    <option value=0.5>50%</option>
    <option value=0.6>60%</option>
    <option value=0.7>70%</option>
    <option value=0.75>75%</option>
    <option value=0.8>80%</option>
    <option value=0.85>85%</option>
    <option value=0.9>90%</option>
    <option value=1 selected>100%</option>
    <option value=1.2>120%</option>
    <option value=1.5>150%</option>
    <option value=1>reset</option>
  </select>
  <button class="zoomout"> zoom out</button>
  <button class="open-left">Open Left</button>
  <button class="open-right">Open Right</button>
</div>

<div class="main-container">
  <div class="left-sidepanel">
  </div>
  <div class="wireframe-container">
    <div class="wireframe">
    </div>
  </div>
  <div class="right-sidepanel">
    asdasd
  </div>
</div>

以下是代码笔链接，可让您了解我在说什么。提前致谢。 https://codepen.io/ghewadesumit/pen/MWwmbbY

Answer 1

您可以放置​​“display:flex;” .wireframe-container 内部