Question

我想获取HTML页面的内容，使每个元素都大50％。我尝试过使用CSS3 zoom: 150%，但这也试图缩放图片。由于图像的分辨率最初是为普通视图制作的，因此它们在缩放时看起来很模糊。

是否可以使所有HTML更大，除之外的图像？

Answer 1

将缩放变换应用于元素时，放大倍率将应用于元素本身及其所有子元素。这是大多数浏览器常见的行为，IE除外（我相信）。

因此，要做你想做的事，你只需要扩展以下元素：

非img且不包含任何img后代的元素

使用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)'
            });
        }
    });
});

你可以看到它here

您也可以使用

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

而不是

        $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)'
        });

Answer 2

尝试transform: scale(1.5);这应该有帮助

Answer 3

粗略的做法是：

body {
    zoom: 150%;
}

img {
    zoom: 67%
}

这不会重新缩放背景图像或其他非img元素，因此它并不理想。

缩放忽略图片

3 个答案: