变焦忽略图片

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元素，所以它的效果并不理想。