web-dev-qa-db-ja.com

divのコンテンツをパーセンテージでスケーリングしますか？

ユーザーがボックス内を移動してページレイアウトを構築できるようなCMSを構築します（とにかく基本的な考え方）。

データベースから実際のコンテンツを取得し、「ページ」を構築したいのですが、50％スケールで表示するようにします。

CSSを2セット持つことができます。1つは実際の表向きページ用で、もう1つは管理ツール用で、それに応じてすべてを縮小しますが、それは維持するのが苦痛のようです。

ある種のjqueryやCSS、またはdivにデータを入力して50％スケールのプロパティ（？）を与えることができるようなものがあればいいのにと思っていました。

javascriptjquerycssscale
61
Dave

zoom プロパティを使用するだけです：

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

MyContainerには、編集中のすべての要素が含まれます。これは、すべての主要なブラウザーでサポートされています。

116
Benjamin Gruenbaum

このクロスブラウザライブラリはより安全に思えます-ズームとmoz-transformはjquery.transform2dのscale（）ほど多くのブラウザをカバーしません。

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

例えば

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

更新

OK-人々は説明なしでこれを投票しています。ここでの他の答えは、古いSafari（Tigerを実行している人々）では機能せず、一部の古いブラウザーでは一貫して機能しません。つまり、物事をスケーリングしますが、他のブラウザと一致しない方法での要素の位置。

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

または、この質問を見てください。

クロスブラウザーCSSズームの完全なスタイル

28
Chris Moschini