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

Question

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

1. 该方案是如下，还有一个主要的div，它包括三个孩子莱夫特赛德面板，rightside面板和wrapperdiv。

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

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

4. 我现在面临的挑战是，当我放大内容时，应该粘在包装器 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>

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

Answer 1

你可以放置“display:flex;” 在 .wireframe-container 里面