it-swarm.com.de

Den Inhalt einer Division um einen Prozentsatz skalieren?

Erstellen Sie eine Art CMS, in dem der Benutzer sich durch Kästchen bewegen kann, um ein Seitenlayout zu erstellen (Grundidee).

Ich möchte den eigentlichen Inhalt aus der Datenbank ziehen und die "Seite" ausbauen, aber mit einer 50% -Skala anzeigen lassen.

Mir ist klar, dass ich zwei CSS-Sätze haben könnte - einen für die eigentliche Vorderseite und einen für das Admin-Tool und einfach alles entsprechend verkleinern, aber das scheint mir mühsam zu sein.

Ich hatte gehofft, dass es eine Art von JQuery oder CSS geben könnte, mit der ich einen Div füllen und ihm die Eigenschaften (?) Einer 50% -Skala geben könnte.

61
Dave

Sie können einfach die zoom Eigenschaft verwenden:

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

Wo myContainer alle Elemente enthält, die Sie bearbeiten. Dies wird in allen gängigen Browsern unterstützt.

116

Diese browserübergreifende Bibliothek scheint sicherer zu sein - nur Zoom und Moz-Transformation decken nicht so viele Browser ab wie jquery.transform2ds scale ().

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

Beispielsweise

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

Aktualisieren

OK - Ich sehe, dass die Leute dies ohne Erklärung ablehnen. Die andere Antwort hier funktioniert in alten Safari-Versionen (mit Tiger) nicht und in einigen älteren Browsern nicht konsistent - das heißt, es skaliert die Dinge, aber auf eine Weise, die entweder sehr pixelig ist oder die sich verschiebt Position des Elements in einer Weise, die nicht mit anderen Browsern übereinstimmt.

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

Oder schauen Sie sich diese Frage an, die wahrscheinlich nur ein Betrug von:

vollständige Stile für den browserübergreifenden CSS-Zoom

28
Chris Moschini