Html CSS 从左上角缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23760845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS scale from left top
提问by 2339870
I am trying to scale my entire page from the top left. This is what my original page looks like:
我试图从左上角缩放我的整个页面。这是我原来的页面的样子：
However when I try to scale my page, this happens:
但是，当我尝试缩放页面时，会发生这种情况：
This is my CSS:
这是我的 CSS：
html {
zoom: 1.4; /* Old IE only */
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
transform-origin: top left;
}
What am I doing wrong? It cuts off part of my page.
我究竟做错了什么？它切断了我页面的一部分。
回答by 2339870
I was able to "solve" my problem.
我能够“解决”我的问题。
This is what I tried:
这是我尝试过的：
In the CSS shown in the question, I changed
htmltobody:body { zoom: 1.4; /* Old IE only */ -moz-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); transform-origin: top center; margin-top: 5px; }I changed
transform-origin: top lefttotransform-origin: top center.- I also changed the CSS of my container div so that it is centered.
在问题中显示的 CSS 中，我更改
html为body：body { zoom: 1.4; /* Old IE only */ -moz-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); transform-origin: top center; margin-top: 5px; }我换
transform-origin: top left到transform-origin: top center。- 我还更改了容器 div 的 CSS，使其居中。
This fixed the problem partly as it centered to page nicely.
这部分解决了问题，因为它很好地以页面为中心。
However, part of the top page still isn't displayed correctly. To fix this I added a margin-topto my body.
但是，首页的一部分仍未正确显示。为了解决这个问题，我margin-top在我的body.
回答by kbriggs
I know this question is 3 years old but I just stumbled on it. The reason your transform is not positioned correctly is because your transform-origin parameters are backwards and thus are ignored. It's "transform-origin: x-axis y-axis" so you should have "transform-origin: left top", not "transform-origin: top left".
我知道这个问题已经有 3 年历史了，但我只是偶然发现了它。您的转换未正确定位的原因是您的转换原点参数向后，因此被忽略。它是“变换原点：x 轴 y 轴”，所以你应该有“变换原点：左上角”，而不是“变换原点：左上角”。
回答by mohamedrias
zoom: 1.4;
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
Scaling is cutting off your content. Reduce scaling to 0.4, it's rendering properly.
缩放正在切断您的内容。将缩放比例降低到 0.4，它可以正确渲染。
zoom: 0.4;
-moz-transform: scale(0.4);
-webkit-transform: scale(0.4);
