Question

56

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

rated 0 times [ 62] [ 6] / answers: 1 / hits: 58379 / 7 Years ago, sat, april 29, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jonrened

Add To Favorites

Follow

Total Points: 627

Total Questions: 114

Total Answers: 99

Location: Zimbabwe

Member since Thu, Jul 21, 2022

2 Years ago

jonrened questions

1 Jest Received: serializes to the same string

Mon, Nov 2, 20, 00:00, 4 Years ago

1 Keeping placeholder on react-select

Tue, May 19, 20, 00:00, 4 Years ago

1 How to show the first item by default in a dynamic Antd form?

Sat, May 16, 20, 00:00, 4 Years ago

1 querySelectorAll to include self

Tue, Jan 21, 20, 00:00, 4 Years ago

1 Compare two nested array and objects for find difference

Thu, Nov 7, 19, 00:00, 5 Years ago

View All

answered 7 Years ago nellykaliae · Accepted Answer

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>