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 should then become, say, 200px. And all the children of this div should also be doubled in size.
What's the best way to do this?
My understanding is that there's a CSS zoom, but only in IE--it's not part of any CSS standard.
You should use CSS3's transform: scale().
See: http://jsfiddle.net/Favaw/ - (I used jQuery for convenience, but it's not a requirement)
.zoomedIn2x {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
If you need to support older versions of IE than 9, then generate .zoomedIn2x using this tool:
If you want to do this more dynamically (such as other levels of zoom), then instead use cssSandpaper.
You might want to look into the jQuery plugin Zoomooz: http://janne.aukia.com/zoomooz/
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;
}<div id="zoomediv">
<h1>
Title
</h1>
<p>
this is a paragraph
</p>
</div>
<button id="zoomin">
<h1>
+
</h1>
</button>
<button id="zoomout">
<h1>
-
</h1>
</button>
zoomis supported by all major browsers except Firefox (Not sure about Firefox 4 though).