Wie kann ich das Container-Div und seinen gesamten Inhalt auf eine bestimmte Größe zoomen?

Lesezeit: 2 Minuten

Rashid

Ich habe eine HTML-Seite mit 100 % (Browser-)Breite erstellt, die viele Inhalte enthält. Der Inhalt ist auf der Seite festgelegt und seine Größe wird sowohl in Pixeln als auch in Prozent angegeben.
Jetzt muss ich ein Werbefeld mit einer Browserbreite von 20 % hinzufügen. Und möchte Zoomen Sie den Seitencontainer und seinen gesamten Inhalt INKLUSIVE TEXT auf 80 % (wie das Zoomen, das in allen Webbrowsern verfügbar ist, aber es sollte ein internes Zoomen sein).
Leider ist meine Seite reagiert nicht und ich möchte es nicht von Grund auf neu entwickeln oder die Größe seines gesamten Inhalts ändern.
Gibt es in HTML eine Zoomfunktion?

Google „CSS-Transformationsskala“, wenn das hilft

– blecaf

29. April 2017 um 20:27

subramanisch

Sie können die CSS-Transformationseigenschaft verwenden

     transform: scale(0.1);
     transform-origin: 0% 0% 0px;

Schauen Sie sich die Zoomfunktion an, die ich erstellt habe

function setZoom(zoom,el) {
      
      transformOrigin = [0,0];
	    el = el || instance.getContainer();
	    var p = ["webkit", "moz", "ms", "o"],
            s = "scale(" + zoom + ")",
            oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";

	    for (var i = 0; i < p.length; i++) {
	        el.style[p[i] + "Transform"] = s;
	        el.style[p[i] + "TransformOrigin"] = oString;
	    }

	    el.style["transform"] = s;
	    el.style["transformOrigin"] = oString;
      
}

//setZoom(5,document.getElementsByClassName('container')[0]);

function showVal(a){
   var zoomScale = Number(a)/10;
   setZoom(zoomScale,document.getElementsByClassName('container')[0])
}

.container{
  width:500px;
  height:500px;
  background:blue;
}

<input id="test" min="1" max="10" value="10" step="1" onchange="showVal(this.value)" type="range"/>
<div class="container">

</div>

gute Arbeit @subbu1191. Ich habe Ihre Geige überprüft und die Größe aller Elemente im Container geändert.

– Rashid

7. Mai 2017 um 5:20
Darf ich fragen, was der Zweck ist transformOrigin = [0,0] in deiner Geige?

– Alex Pappas

20. Februar 2019 um 2:22
@ColdCerberus: Die Tranform-Eigenschaft in CSS ändert die Skalierung des Elements, aber wenn sich die Skalierung ändert, ändert sich auch die x- und y-Position des Elements. Um dies zu vermeiden, wird die transformOrigin-Eigenschaft verwendet, um sicherzustellen, dass das Element im gleichen x- und y-Bereich vorhanden ist Position wie zuvor. Schauen Sie sich die folgende Geige an jsfiddle.net/j9roehqc/4

– subramanisch

20. Februar 2019 um 8:47 Uhr
@subbu Vielen Dank für diese Erklärung. Ich verwende diese Antwort derzeit in meinem Projekt und mein aktuelles Problem besteht darin, den Inhalt/das untergeordnete Element im Container/übergeordneten Element zentriert zu halten. Habe ich recht damit? transformOrigin wird das Problem lösen? Ich bin mir allerdings nicht sicher, wie.

– Alex Pappas

20. Februar 2019 um 9:57 Uhr
Dieser Code ist super kaputt. Wie kann es so viele Uploads geben!?

– CodingYourLife

15. Februar 2022 um 18:19 Uhr

Sumit Ghewade

Ich habe versucht, eine Funktion zum Vergrößern und Verkleinern mit einfachem HTML, CSS und Javascript zu erstellen. Schauen Sie sich das an.s

https://codepen.io/ghewadesumit/pen/poJEYVG?editors=1111

14528600cookie-checkWie kann ich das Container-Div und seinen gesamten Inhalt auf eine bestimmte Größe zoomen?

#CSS #html #Javascript #jquery