Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 347
Rashid Avatar asked Apr 29 '17 06:04

Rashid


People also ask

How do you keep a div constant in size as the user zooms in and out on the page?

Is there an html / css / javascipt way to maintain a <div> at a constant size in the face of the user's zooming the page in and out? That is, using control-plus to increase text size and control-minus to reduce it.

How do you make a div fit its content?

You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).

How do I make a div stay the same size?

if you set width:500px; and height:300px; (or whatever size you want) the div should stay the same size. Also, you can set overflow:hidden; so that if whatever is in the div goes beyond those bounds, it is not shown, and does not resize the div. Save this answer. Show activity on this post.


1 Answers

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>
like image 130
subbu Avatar answered Oct 02 '22 12:10

subbu