Как разместить уменьшенный div внутри центра родительского div

Question

В настоящее время я работаю над увеличением и уменьшением функциональности.

1. Сценарий выглядит следующим образом: есть главный элемент div, включающий трех дочерних элементов левая сторона , правая панель и wrapperdiv .

2. Левая и правая боковые панели являются разборными, и элемент оболочки соответствующим образом настраивается.

3. Цель состоит в том, чтобы увеличить и уменьшить содержимое обертки div . Давайте назовем это child 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-контейнера