Wie kann ich Iframe-Inhalte mithilfe von CSS auf 80 % seiner Originalgröße skalieren?

Inhalt in einem Iframe skalieren

Um den Inhalt eines Iframes auf eine gewünschte Größe zu skalieren, können Sie CSS-Transformationen verwenden. In diesem Fall besteht das Ziel darin, den Iframe mit 80 % seiner Originalgröße anzuzeigen.

Kip's Lösung kann dies mit geringfügigen Modifikationen in Browsern wie Opera und Safari erreichen. Das CSS sollte wie folgt angepasst werden:

#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame {
    -ms-zoom: 0.75;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;
}

In diesem Code ist die Eigenschaft „-ms-zoom“ spezifisch für den Internet Explorer, während die anderen Transformationseigenschaften für andere Browser gelten. Wenn Sie den „scale“-Wert auf 0,75 festlegen, wird der Iframe-Inhalt effektiv auf 75 % seiner ursprünglichen Größe verkleinert.

Zusätzlich können Sie „overflow: hide“ für das „frame“-Element festlegen, um die Darstellung zu unterdrücken von Bildlaufleisten. Dadurch wird sichergestellt, dass der skalierte Inhalt innerhalb der angegebenen Abmessungen bleibt.

Das obige ist der detaillierte Inhalt vonWie kann ich Iframe-Inhalte mithilfe von CSS auf 80 % seiner Originalgröße skalieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!