Échelle le contenu d'un div par un pourcentage?

Créer un CMS de sorte où l'utilisateur peut se déplacer autour de boîtes pour créer une mise en page (idée de base de toute façon).

J'aimerais tirer 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 ensembles de CSS – l'un pour la page face frontale réelle, et l'autre pour l'outil d'administration, et que je réduis tout en conséquence, mais cela me semble douloureux.

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

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 pris en charge dans tous les principaux navigateurs.

Ce navigateur croisé par navigateur semble plus sécurisé: il suffit de zoomer et Moz-transform ne couvrira pas autant de navigateurs que l'échelle de jquery.transform2d ().

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

Par exemple

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

Mettre à jour

OK – Je vois que les gens votent sans une explication. L'autre réponse ici ne fonctionnera pas dans l'ancien Safari (personnes qui utilisent Tiger), et cela ne fonctionnera pas régulièrement dans certains navigateurs plus anciens, c'est-à-dire qu'il fait des choses, mais il le fait de manière à être très pixellé ou Position de l'élément d'une manière qui ne correspond pas à d'autres navigateurs.

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

Ou regardez simplement cette question, dont celle-ci est probablement juste une dupe de:

Styles complets pour le zoom CSS du navigateur croisé