Comment définir l'iframe adaptatif dans WEB

Cette fois je vais vous montrer comment mettre en place iframe adaptative en WEB. Quelles sont les précautions pour mettre en place iframe adaptative en WEB. Voici un cas pratique, jetons un oeil.

Problème
Dans Responsive Layout, nous devons être prudents avec les éléments iframe. Les attributs width et height de l'élément iframe définissent sa largeur et sa hauteur, mais lorsque la largeur ou la hauteur du contenant. block is Lorsque la hauteur est inférieure à la largeur ou à la hauteur de l'iframe, l'élément iframe débordera :

Un tel débordement d'iframe détruira la mise en page de la page. Il existe un moyen de rendre l'élément iframe réactif également, attendez et voyez.

Solution
L'élément iframe lui-même ne peut pas être rétracté à moins que sa largeur ne soit définie via l'affichage js. Mais nous pouvons envelopper l'iframe avec un élément iframe-container, laisser la largeur de l'élément iframe-container remplir la largeur du bloc conteneur et définir le padding-bottom de l'élément iframe-container en fonction de le rapport hauteur/largeur du pourcentage iframe.

En fait, l'essence de cette méthode est de définir l'attribut padding-bottom de l'élément iframe-container. Le but de la définition de cet attribut est de définir la hauteur de l'élément déguisé. Étant donné que la définition du pourcentage pour padding-bottom est relative à la largeur de l'élément parent, si le pourcentage est défini pour l'attribut height, il est relatif à la hauteur de l'élément parent, et nous utilisons généralement la valeur auto par défaut pour la valeur de hauteur. de l'élément parent, il apparaîtra donc. La hauteur de l'élément enfant est également 0. Par conséquent, nous ne pouvons définir des attributs que pour padding-bottom. De cette façon, laissez simplement l'élément iframe remplir le conteneur iframe.

.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>

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser le serveur sse de h5 pour envoyer des événements EventSource

Comment implémenter la fonction de mémorisation du mot de passe en h5

Comment appeler la fonction APP dans la page H5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!