web-dev-qa-db-ja.com

左上からのCSSスケール

ページ全体を左上から拡大しようとしています。これは私の元のページのようです：

enter image description here

しかし、ページをスケーリングしようとすると、これが起こります：

enter image description here

これは私の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;
}

私は何を間違えていますか？それは私のページの一部を切り取ります。

htmlcssscale
19
2339870

問題を「解決」できました。

これは私が試したものです：

  • 質問に示されている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を変更して中央に配置しました。

これにより、ページの中央に適切に配置されるため、問題が部分的に修正されました。

ただし、トップページの一部はまだ正しく表示されません。これを修正するために、margin-top私のbodyに。

25
2339870

私はこの質問が3歳であることを知っていますが、私はつまずいただけです。変換が正しく配置されない理由は、transform-Originパラメーターが後方であり、したがって無視されるためです。 「transform-Origin：x-axis y-axis」なので、「transform-Origin：top left」ではなく「transform-Origin：left top」にする必要があります。

19
kbriggs
 zoom: 1.4; 
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);

スケーリングはコンテンツを切断します。スケーリングを0.4に減らすと、適切にレンダリングされます。

zoom: 0.4; 
-moz-transform: scale(0.4);
-webkit-transform: scale(0.4);
0
mohamedrias