How to place the zoomed out div inside the center of the parent div

Question

I'm currently working on zoom in and zoom out functionality.

1. The scenario is as follows, there is a main div and it includes three children leftside panel , rightside panel and wrapperdiv .

2. Both the left and right side panel are collapsible and the wrapper div gets adjusted accordingly.

3. The goal is to zoom in and zoom out the content of the wrapper div . Lets call it child div .

4. The challenge i'm facing right now is that when I zoom in the content should stick to the top left corner of the available space of wrapper div

5. The second challenge i'm facing is that when i Zoom out the child should be centered into the available space of the wrapper 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>

Following is the codepen link to give you an idea what i'm talking about. Thanks in advance. https://codepen.io/ghewadesumit/pen/MWwmbbY

Answer 1

You can place "display:flex;" inside the .wireframe-container