CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rashid
Rashid

Reputation: 1384

How to zoom container div and all its contents to a specific size?

I created an HTML page with 100% (browser) width which have lot of contents. Contents are fixed in page and their sizes are both in pixels & percentages.
Now I need to add advertisement panel of 20% browser width. And want to zoom the page container and all its contents INCLUDING TEXT to 80% (like the zooming available in all web browsers but it should be an internal zooming).
Unfortunately my page is not responsive and I do not want to redevelop it or resize all its contents from scratch.
Is there any zooming facility available in HTML?

Upvotes: 32

Views: 81588

Answers (2)

subramanian
subramanian

Reputation: 1305

You can use the CSS transform property:

transform: scale(0.1);
transform-origin: 0% 0%;

Here's an example with zooming functionality I have created:

function setZoom(el, scale, transformOrigin) {
  el.style.transform = `scale(${scale})`;
  el.style.transformOrigin = `${transformOrigin[0] * 100}% ${transformOrigin[1] * 100}%`;
}

document.querySelector('#test').addEventListener('input', function() {
  const scale = this.value / 10;
  setZoom(document.querySelector('#container'), scale, [0, 0]);
});
#container {
  width: 500px;
  height: 500px;
  background: blue;
}
<input id="test" min="1" max="10" value="10" step="1" type="range">
<div id="container"></div>

Upvotes: 79

Sumit Ghewade
Sumit Ghewade

Reputation: 483

I have tried making a zoom-in and zoom-out functionality using plain HTML, CSS and Javascript have a look.s

https://codepen.io/ghewadesumit/pen/poJEYVG?editors=1111

Upvotes: 2

Related Questions