JavaScript/HTML/CSS：缩放答案

【问题标题】：JavaScript/HTML/CSS: ZoomingJavaScript/HTML/CSS：缩放
【发布时间】：2011-09-02 01:52:36
【问题描述】：

假设我有一个带有 div 和一个按钮的页面。当您单击按钮时，应该放大 div。换句话说，如果那个 div 是 100px，当你缩放时，它应该变成 200px。并且这个 div 的所有子元素的大小也应该加倍。

最好的方法是什么？

我的理解是有一个 CSS zoom，但只在 IE 中——它不是任何 CSS 标准的一部分。

【问题讨论】：

根据 stackoverflow.com/questions/1156278/… ，CSS zoom 支持除 Firefox 之外的所有主流浏览器（但不确定 Firefox 4）。

标签： javascript html css zooming

【解决方案1】：

你应该使用 CSS3 的transform: scale()。

请参阅： http://jsfiddle.net/Favaw/ - （我使用 jQuery 是为了方便，但这不是必需的）

.zoomedIn2x {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);

    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

如果你需要支持 IE 9 以上的旧版本，那么使用这个工具生成.zoomedIn2x：

http://www.useragentman.com/IETransformsTranslator/index.html

如果您想更动态地执行此操作（例如其他级别的缩放），请改用cssSandpaper。

【讨论】：

【解决方案2】：

您可能想查看 jQuery 插件 Zoomooz：http://janne.aukia.com/zoomooz/

【讨论】：

+1 一个很酷的插件。不幸的是，当涉及到 IE 时，它只适用于版本 9+ :(

【解决方案3】：

最好的解决方案是使用 zoom: 50%

我用javascript做了这个例子，你可以测试它并随意改变它

var zoomediv = document.getElementById('zoomediv')

var zoomin_button = document.querySelector('#zoomin')
zoomin_button.addEventListener('click', function(){
  zoomediv.style.zoom = '125%'
})

var zoomout_button = document.querySelector('#zoomout')
zoomout_button.addEventListener('click', () => {
  zoomediv.style.zoom = '75%'
})

div {
  background: #f0f0f0;
  
  border: 1px solid #e0e0e0;
  width: fit-content;
  padding: 1rem;
  margin-bottom: 1rem;
}

button {
  padding: 0 3rem;
}

<div id="zoomediv">
  <h1>
    Title
  </h1>
  <p>
    this is a paragraph
  </p>
</div>

<button id="zoomin">
  <h1>
    +
  </h1>
</button>

<button id="zoomout">
  <h1>
    -
  </h1>
</button>

【讨论】：