How to Zoom Element’s Content With CSS
There is change in the display size with varying screen resolutions, so to make your content more readable its a good idea to add a button with the option of zoom in and out. Here we provide a simple example of doing so.
CSS has a zoom property with the help of this property we can zoom any element’s contents. You can give percentage value to this property, for instance, you can zoom contents of an element to 300% using code zoom:300%;. Unfortunately this property is not supported by Firefox, you can use this property only for Internet Explorer version 5.5 or above and some other major browsers. Below we provided a example code showing the to zoom a div to different sizes with the click of the button.
1 2 3 4 5 6 7 8 9 10 11
<div id="sampleDiv" style="width: 100px; background-color: Gray;">
Zoom Me
</div>
<button onclick="sampleDiv.style.zoom='300%'">Zoom 300%</button>
<button onclick="sampleDiv.style.zoom='200%'">Zoom 200%</button>
<button onclick="sampleDiv.style.zoom='100%'">Zoom 100%</button>
Related posts
- How to Create a Header With CSS
- How to set CSS height Properties
- How to create password strength meter
- How to use large Background using CSS
- How to Collapse Tables with CSS and DOM
- How to Include CSS in a Website
- How to Change the Text Selection Color with CSS
- How to Make an Image Bigger when Hovered with CSS
- How to Calculate Height and Width of a Div
- How to Write a CSS Rule
No Response
Post your response