How can I scale an entire web page with CSS?

html css resize
TimH picture TimH · Jul 21, 2009 · Viewed 283.8k times · Source

Using Firefox, you can enlarge an entire web page by simply pressing CTRL +. What this does is proportionally enlarge the entire web page (fonts, images, etc).

How can I replicate the same functionality using simply CSS?

Is there something like page-size: 150% (which would increase the entire page portions by x%?)

Answer

Jon Galloway picture Jon Galloway · Jul 21, 2009

You might be able to use the CSS zoom property - supported in IE 5.5+, Opera, and Safari 4, and Chrome

Can I use: css Zoom

Firefox is the only major browser that does not support Zoom (bugzilla item here) but you could use the "proprietary" -moz-transform property in Firefox 3.5.

So you could use:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
}

Related questions

Scale image to fit a bounding box

Is there a css-only solution to scale an image into a bounding box (keeping aspect-ratio)? This works if the image is bigger than the container: img { max-width: 100%; max-height: 100%; } Example: Use case 1 (works): http://jsfiddle.net/Jp5AQ/2/ Use case 2 (works): …

Read More
How can I make all images of different height and width the same via CSS?

I am trying to create an image wall consisting of product photos. Unfortunately, all of them are of different height and width. How can I use css to make all images look the same size? preferably 100 x 100. I was thinking …

Read More
How to center canvas in html5

I've been searching for a solution for a while now, but haven't found anything. Maybe it's just my search terms. Well, I'm trying to make the canvas center according to the size of the browser window. The canvas is 800x600. …

Read More