Methode der Iframe-Anpassung im webresponsiven Layout

Problem <br />Bei responsivem Layout sollten wir mit Iframe-Elementen vorsichtig sein. Die Breite- und Höhe-Attribute des Iframe-Elements legen dessen Breite und Höhe fest, aber wenn die Breite oder Höhe des umschließenden Blocks kleiner als die Breite oder Höhe des Iframes ist, läuft das Iframe-Element über:

Ein solcher überlaufender Iframe zerstört das Layout der Seite. Wir können auch einen Weg finden, das Iframe-Element responsiv zu machen, also bleiben Sie dran.

Problemumgehung
Das Iframe-Element selbst kann nicht gestreckt werden, es sei denn, seine Breite wird explizit über js festgelegt. Wir können das Iframe jedoch mit einem Iframe-Containerelement umschließen, die Breite des Iframe-Containerelements so einstellen, dass sie die Breite des umschließenden Blocks ausfüllt, und den Prozentsatz für die untere Polsterung des Iframe-Containerelements entsprechend dem Seitenverhältnis des Iframes festlegen.

Tatsächlich besteht das Wesentliche dieser Methode darin, das Padding-Bottom-Attribut des Iframe-Container-Elements festzulegen. Der Zweck des Festlegens dieses Attributs besteht darin, die Höhe des Elements verdeckt festzulegen. Denn das Festlegen eines Prozentsatzes für „padding-bottom“ ist relativ zur Breite des übergeordneten Elements. Wenn Sie einen Prozentsatz für das Höhenattribut festlegen, ist dieser relativ zur Höhe des übergeordneten Elements. Normalerweise verwenden wir den Standardwert „auto“ für den Höhenwert des übergeordneten Elements, sodass die Höhe des untergeordneten Elements ebenfalls 0 beträgt. Daher können wir nur Attribute für „padding-bottom“ festlegen. Lassen Sie auf diese Weise einfach das Iframe-Element den Iframe-Container füllen.

Das Ergebnis zeigt den Status:

Wenn die Ansichtsfensterbreite größer als 400 Pixel ist:

Wenn die Ansichtsfensterbreite weniger als 400 Pixel beträgt:

Zusammenfassung <br />Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit eine gewisse Hilfe sein kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen.