Wie zoom-div-container und sein gesamter Inhalt auf eine bestimmte Größe?

Erstellte ich eine HTML-Seite mit 100% (browser -) Breite, die haben sehr viel Inhalt. Inhalte sind fest in Seite, und diese Größen sind sowohl in Pixeln & Prozentsatz.

Jetzt muss ich hinzufügen, Werbung-panel von 20% der browser-Breite. Und wollen die Seite Zoomen-container und deren Inhalte, EINSCHLIEßLICH TEXT zu 80% (wie das Zoomen in allen web-Browsern, aber es sollte ein interner Zoom).

Leider ist meine Seite ist nicht reagieren und ich will nicht zu Sanieren oder die Größe ändern alle Inhalte von Grund auf.

Gibt es eine Zoom-Einrichtung zur Verfügung, die in HTML?

  • Google "css-transformieren-skalieren", wenn das hilft
InformationsquelleAutor Rashid | 2017-04-29
  1. 13

    können Sie die css-Eigenschaft transform

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

    haben Sie einen Blick auf die Zoom-Funktionalität, die ich erstellt habe

    JS:

    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])
}

    CSS:

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

    HTML:

    <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 seiner Größenänderung jede & alles in den container.
    • Darf ich Fragen, was der Zweck der transformOrigin = [0,0] in Ihre Geige?
    • die Transform-Eigenschaft in css skaliert das element aber, wie die Skalierung der x-und y-position des Elements ändert sich auch, dies zu vermeiden, die transformOrigin-Eigenschaft wird verwendet, um sicherzustellen, dass das element vorhanden ist, in der gleichen x-und y-position als zuvor.werfen Sie einen Blick auf die unten fiddle jsfiddle.net/j9roehqc/4
    • Danke für diese Erklärung. Derzeit bin ich über diese Antwort auf mein Projekt und mein Aktuelles problem versucht zu halten, den Inhalt/Kind-zentriert innerhalb des Containers/eines Elternteils. Bin ich richtig, dass diese transformOrigin wird das problem zu lösen? Ich bin mir nicht sicher, wie Sie Sie aber.
    • hoffentlich , wenn Sie teilen können, jede Geige des Codes ? können einen Blick haben
    InformationsquelleAutor subbu
Schreibe einen Kommentar