Wie kann ich den Inhalt eines eingebetteten Iframes skalieren, um ihn an meine Webseite anzupassen?

Skalieren des Inhalts eines eingebetteten Iframes

Durch die Integration von Iframes in Ihre Webseiten können Sie externe Inhalte anzeigen, ohne die Hauptseite zu verlassen. Es kann jedoch erforderlich sein, die Größe des eingebetteten Inhalts anzupassen, um seine Darstellung zu optimieren.

Lösung:

Kip's vorgeschlagener Ansatz kann den Inhalt innerhalb eines Iframes effektiv skalieren, einschließlich Browser wie Opera und Safari. Hier ist das aktualisierte CSS zur Implementierung seiner Lösung:

#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;
}

Dieses CSS ändert die Eigenschaften der Elemente #wrap und #frame, um die Gesamtgröße und Anzeige des Iframes zu steuern. Durch die Angabe einer Transformationsskala von 0,75 wird der Inhalt im Iframe auf 80 % seiner ursprünglichen Größe reduziert, wobei sein Seitenverhältnis erhalten bleibt.

Um das Erscheinen von Bildlaufleisten im Iframe zu verhindern, können Sie dies auch tun Überlauf hinzufügen: versteckt zur CSS-Deklaration #frame.

Das obige ist der detaillierte Inhalt vonWie kann ich den Inhalt eines eingebetteten Iframes skalieren, um ihn an meine Webseite anzupassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!