Mettre à l'échelle le contenu d'une division en fonction d'un pourcentage ?

Question

Construire une sorte de CMS où l'utilisateur peut déplacer des boîtes pour construire une mise en page (idée de base en tout cas).

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 sais que je pourrais avoir 2 jeux de CSS - un pour la page principale, et un pour l'outil d'administration et tout rétrécir en conséquence, mais cela semble être une douleur à maintenir.

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

Answer 1

Vous pouvez simplement utiliser la fonction zoom propriété :

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

Où myContainer contient tous les éléments que vous modifiez. Cette méthode est prise en charge par tous les principaux navigateurs.

Answer 2

Cette librairie multi-navigateurs semble plus sûre - il suffit de zoomer et moz-transform ne couvrira pas autant de navigateurs que la fonction scale() de jquery.transform2d.

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

Par exemple

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

Mise à jour

OK - Je vois que les gens votent contre ce projet sans explication. L'autre réponse ici ne fonctionnera pas dans l'ancien Safari (les gens qui utilisent Tiger), et elle ne fonctionnera pas de manière cohérente dans certains navigateurs plus anciens - c'est-à-dire qu'elle met les choses à l'échelle, mais elle le fait d'une manière qui est soit très pixellisée, soit qui déplace la position de l'élément d'une manière qui ne correspond pas à celle des autres navigateurs.

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

Ou alors, il suffit de regarder cette question, dont celle-ci n'est probablement qu'une copie :

styles complets pour le zoom CSS inter-navigateurs