如何將縮小的 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 里面