Den Inhalt eines Divs um einen Prozentsatz skalieren?


73

Erstellen einer Art CMS, in dem sich der Benutzer in Feldern bewegen kann, um ein Seitenlayout zu erstellen (ohnehin Grundidee).

Ich möchte den eigentlichen Inhalt aus der Datenbank abrufen und die "Seite" erstellen, aber sie soll in einem Maßstab von 50% angezeigt werden.

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

Ich hatte gehofft, es könnte eine Art Abfrage oder CSS geben oder etwas, das es mir ermöglicht, ein Div zu füllen und ihm die Eigenschaften (?) Von 50% zu geben.


Antworten:


136

Sie können einfach die Zoom- Eigenschaft verwenden:

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

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


6
Nur aus Neugier, wenn zoomin allen gängigen Browsern unterstützt, warum ist -moz-transform: scale(0.5);erforderlich? Oder sind beide Anweisungen erforderlich, um alle Browser abzudecken?
Rinogo

4
@rinogo Laut Kann ich keine aktuelle Version der Firefox-Unterstützung verwenden zoom, daher gehe ich davon aus, dass dies der Grund -moz-transformist.
Venning

1
Das spart mir viel Zeit!
Shah Abaz Khan


3
Wenn es auf Firefox nicht gut aussieht (dh nicht richtig ausgerichtet ist), fügen Sie diese Eigenschaft hinzu transform-origin: 0 0oder -moz-transform-origin: 0 0beheben Sie es!
Supersan

30

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

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

Zum Beispiel

$('#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 funktioniert sie nicht konsistent. Das heißt, sie skaliert die Dinge, aber auf eine Weise, die entweder sehr pixelig ist oder die ändert Position des Elements auf eine Weise, die nicht mit anderen Browsern übereinstimmt.

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

Oder schauen Sie sich einfach diese Frage an, von der diese wahrscheinlich nur ein Betrug ist:

Komplette Stile für den browserübergreifenden CSS-Zoom


transformieren und skalieren ist der moderne Ansatz :)
Frage
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.