web-dev-qa-db-fra.com

Échelle CSS à partir du haut à gauche

J'essaie de mettre à l'échelle toute ma page en haut à gauche. Voici à quoi ressemble ma page d'origine:

enter image description here

Cependant, lorsque j'essaie de mettre ma page à l'échelle, cela se produit:

enter image description here

Voici mon 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;
}

Qu'est-ce que je fais mal? Cela coupe une partie de ma page.

htmlcssscale
19
2339870

J'ai pu "résoudre" mon problème.

Voici ce que j'ai essayé:

  • Dans le CSS montré dans la question, j'ai changé html en 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;
}

  • J'ai changé transform-Origin: top left à transform-Origin: top center.

  • J'ai également changé le CSS de ma div de conteneur pour qu'il soit centré.

Cela a résolu le problème en partie car il était centré sur la page.

Cependant, une partie de la page d'accueil ne s'affiche toujours pas correctement. Pour résoudre ce problème, j'ai ajouté un margin-top à mon body.

25
2339870

Je sais que cette question a 3 ans mais je suis juste tombée dessus. La raison pour laquelle votre transformation n'est pas positionnée correctement est que vos paramètres de transformation-Origine sont en arrière et sont donc ignorés. C'est "transform-Origin: axe x axe y" donc vous devriez avoir "transform-Origin: gauche en haut", pas "transform-Origin: en haut à gauche".

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

La mise à l'échelle, c'est couper votre contenu. Réduisez l'échelle à 0,4, le rendu est correct.

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