So stellen Sie iframe adaptiv im WEB ein

Dieses Mal zeige ich Ihnen, wie Sie iframe adaptiv im WEB einrichten. Was sind die Vorsichtsmaßnahmen für das Einrichten von iframe adaptiv im WEB?

Problem
Im Responsive Layout sollten wir bei iframe-Elementen vorsichtig sein. Die Breiten- und Höhenattribute des iframe-Elements legen dessen Breite und Höhe fest Block ist Wenn die Höhe geringer ist als die Breite oder Höhe des Iframes, läuft das Iframe-Element über:

Ein solcher überlaufender Iframe zerstört das Layout der Seite. Es gibt eine Möglichkeit, das Iframe-Element auch responsiv zu machen, warten Sie ab.

Lösung
Das Iframe-Element selbst kann nicht zurückgezogen werden, es sei denn, seine Breite wird über js display festgelegt. Aber wir können den iframe mit einem iframe-container-Element umschließen, die Breite des iframe-container-Elements die Breite des enthaltenden Blocks ausfüllen lassen und den padding-bottom des iframe-container-Elements entsprechend festlegen das Seitenverhältnis des Iframes.

Tatsächlich besteht der Kern dieser Methode darin, das Attribut „padding-bottom“ des iframe-container-Elements festzulegen. Der Zweck des Festlegens dieses Attributs besteht darin, die Höhe des getarnten Elements festzulegen. Da das Festlegen des Prozentsatzes für padding-bottom relativ zur Breite des übergeordneten Elements ist, ist der Prozentsatz, wenn er für das Höhenattribut festgelegt wird, relativ zur Höhe des übergeordneten Elements, und wir verwenden normalerweise den Standardwert „Auto“ für den Höhenwert des übergeordneten Elements, daher erscheint die Höhe des untergeordneten Elements ebenfalls 0. 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.

.wrap{
           width: 400px;
           margin: auto;
           border: 5px solid greenyellow;
       }
       .iframe-container{
           height: 0;
           padding-bottom: 97.6%;
           position: relative;
       }
       .iframe-container iframe{
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
       }
       @media screen and (max-width: 400px) {
           .wrap{
               width: 300px;
           }
       }
<div class="wrap">
       <div class="iframe-container">
           <iframe height=498 width=510 src="<a href="http://player.youku.com/embed/XOTE0MjkyODgw">http://player.youku.com/embed/XOTE0MjkyODgw</a>" frameborder=0 allowfullscreen></iframe>
       </div>
   </div>

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie den SSE-Server von h5 zum Senden von EventSource-Ereignissen

So implementieren Sie die Funktion zum Speichern von Passwörtern in h5

So rufen Sie die APP-Funktion auf der H5-Seite auf

Das obige ist der detaillierte Inhalt vonSo stellen Sie iframe adaptiv im WEB ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!