變焦忽略圖片

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