在纸上缩放特定元素

Question

如何放大纸张上的特定符号。我的意思是，我可以缩放整个页面，但现在我想放大特定的元素。

谷歌搜索时发现了一个例子。然而，在那些只是缩放。

你知道我怎么能放大？

Answer 1

的 jsFiddle Demo 的

您可以在元素上使用半标准css zoom和半符合-moz-transform: scale(x);。如上所述，这只会扩展它。为了缩放它，或者模仿真实的缩放，你必须将它包装在一个相对定位的元素中，并将缩放的内容放在一个绝对定位的元素中。这是一个例子：

HTML

<div class="holder"><div id="d">No Zoom</div></div>
<div class="holder"><div id="a">Zoom</div></div>

CSS

#d, #a{
 position:absolute;
 width:100%;
 height:100%;
}

.holder{
 overflow:hidden;
 position:relative;
 width:90px;
 height:90px;
 background-color:blue;
 color:white;
 border: 2px solid black;
 padding:10px;
}

JS

var a = document.getElementById("a");
a.onmouseover = function(){
 this.setAttribute("style","zoom: 5;-moz-transform:scale(5);");
};
a.onmouseout = function(){
 this.removeAttribute("style");
};