Zoom ignoring pictures

I would like to take the contents of an HTML page, an make every element 50% larger. I have t开发者_运维百科ried using CSS3 zoom: 150% but this also attempts to zoom pictures. Because the resolution of the images were originally crafted for a normal view, they look blurry with the zoom.

Is it possible to make all HTML bigger, except for the images?

---

When you apply a scale transformation to an element, the magnification is applied to the element itself and to all of their children. This is a behavior common to most browsers, with the exception of IE (I believe).

So, to do what you want, you need to scale only the following elements:

• elements that are not img and do not contain any img descendants

By using jQuery

$("button").click(function () {
    $("*").each(function (index, value) {
        var $this = $(value);

        // if this is not an image
        if (!$this.is("img") && 
            // and if it does not contain child images
            $this.find("img").length == 0) {

            // then scale it up
            $this.css({
                '-webkit-transform': 'scale(1.5)',
                '-moz-transform': 'scale(1.5)',
                '-o-transform': 'scale(1.5)',
                '-ms-transform': 'scale(1.5)',
                'transform': 'scale(1.5)'
            });
        }
    });
});

You can see it live here

you can also use

        $this.css('zoom', '1.5');

instead of

        $this.css({
            '-webkit-transform': 'scale(1.5)',
            '-moz-transform': 'scale(1.5)',
            '-o-transform': 'scale(1.5)',
            '-ms-transform': 'scale(1.5)',
            'transform': 'scale(1.5)'
        });

---

try transform: scale(1.5); This should help

---

A crude way of doing it would be to have:

body {
    zoom: 150%;
}

img {
    zoom: 67%
}

That will not rescale background images or other non-img elements, so it's not ideal.