JavaScript/HTML/CSS: Zooming

Question

Let\'s say I\'ve got a page with a div, and a button. When you click the button, the div should be zoomed in on. In other words, if that div was 100px, when you zoom, it sho

Answer 1

best solution is using zoom: 50%

i made this example with javascript, you can test it and change it as you like

var zoomediv = document.getElementById('zoomediv')

var zoomin_button = document.querySelector('#zoomin')
zoomin_button.addEventListener('click', function(){
  zoomediv.style.zoom = '125%'
})

var zoomout_button = document.querySelector('#zoomout')
zoomout_button.addEventListener('click', () => {
  zoomediv.style.zoom = '75%'
})

div {
  background: #f0f0f0;
  
  border: 1px solid #e0e0e0;
  width: fit-content;
  padding: 1rem;
  margin-bottom: 1rem;
}

button {
  padding: 0 3rem;
}

  

    Title
  
  

    this is a paragraph
  



  

    +
  



  

    -