如何将容器 div 及其所有内容缩放到特定大小？

Question

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?

Answer 1

you can use css transform property

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

have a look at the zooming functionality i have created

 function setZoom(zoom,el) { transformOrigin = [0,0]; el = el || instance.getContainer(); var p = ["webkit", "moz", "ms", "o"], s = "scale(" + zoom + ")", oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%"; for (var i = 0; i < p.length; i++) { el.style[p[i] + "Transform"] = s; el.style[p[i] + "TransformOrigin"] = oString; } el.style["transform"] = s; el.style["transformOrigin"] = oString; } //setZoom(5,document.getElementsByClassName('container')[0]); function showVal(a){ var zoomScale = Number(a)/10; setZoom(zoomScale,document.getElementsByClassName('container')[0]) }

 .container{ width:500px; height:500px; background:blue; }

 <input id="test" min="1" max="10" value='10' step="1" onchange="showVal(this.value)" type="range"/> <div class="container"> </div>

Answer 2

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