web-dev-qa-db-fra.com

Mettre à l'échelle le contenu d'une div par un pourcentage?

Construire un CMS de toutes sortes où l'utilisateur peut se déplacer pour créer une mise en page (idée de base quand même).

J'aimerais extraire le contenu réel de la base de données et construire la "page", mais l'afficher à une échelle de 50%.

Je me rends compte que je pourrais avoir 2 jeux de CSS - un pour la page de face, et un pour l'outil d'administration et tout rétrécir en conséquence, mais cela semble difficile à maintenir.

J'espérais qu'il pourrait y avoir une sorte de jquery ou CSS ou quelque chose qui me permettrait de peupler une div et de lui donner les propriétés (?) À une échelle de 50%.

javascriptjquerycssscale
61
Dave

Vous pouvez simplement utiliser la propriété zoom :

#myContainer{
    zoom: 0.5;
    -moz-transform: scale(0.5);
}

Où myContainer contient tous les éléments que vous éditez. Ceci est supporté par tous les principaux navigateurs.

116
Benjamin Gruenbaum

Cette librairie multi-navigateurs semble plus sûre: un simple zoom et la transformation moz ne couvrent pas autant de navigateurs que l'échelle de jquery.transform2d ().

http://louisremi.github.io/jquery.transform.js/

Par exemple

$('#div').css({ transform: 'scale(.5)' });

Mise à jour

OK - Je vois des gens qui votent sans explication. L’autre réponse ici ne fonctionnera pas dans l’ancien Safari (les utilisateurs de Tiger) et dans certains navigateurs plus anciens, c’est-à-dire qu’elle redimensionnera les choses, mais de manière très pixélisée ou changera le position de l'élément d'une manière qui ne correspond pas aux autres navigateurs.

http://www.browsersupport.net/CSS/zoom

Ou simplement regarder cette question, qui est probablement juste une dupe de:

styles complets pour le zoom CSS entre navigateurs

28
Chris Moschini