Analyser la méthode d'adaptation iframe dans une mise en page réactive Web

Question
sur Responsive In layout , nous devons être prudents avec les éléments iframe. Les attributs largeur et hauteur de l'élément iframe définissent sa largeur et sa hauteur, mais lorsque le bloc contenant Quand si la largeur ou la hauteur est inférieure à la largeur ou à la hauteur de l'iframe, l'élément iframe va déborder :



Un tel débordement d'iframe détruira la mise en page de la page. utilisez une méthode. Laissez l'élément iframe être également réactif, attendez et voyez

Solution
L'élément iframe lui-même ne peut pas être rétracté à moins que sa largeur ne soit affichée via js. passez un élément iframe-container pour envelopper l'iframe, tout en laissant la largeur de l'élément iframe-container remplir la largeur du bloc conteneur, et définissez le pourcentage padding-bottom de l'élément iframe-container en fonction de le rapport hauteur/largeur de l'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ée, car le réglage. le pourcentage pour padding-bottom est relatif à la largeur de l'élément parent. Pour parler franchement, si l'attribut height est défini en pourcentage, il est relatif à la hauteur de l'élément parent. Nous utilisons généralement la valeur auto par défaut pour le. height de l'élément parent, donc la hauteur de l'élément enfant sera également 0. Par conséquent, nous ne pouvons donner que padding-bottom Set l'attribut. De cette façon, remplissez simplement le conteneur iframe avec

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

comme indiqué Statut :

<p class="wrap">
        <p 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>
        </p>
    </p>

Lorsque la largeur de la fenêtre d'affichage est inférieure à 400 px :



Résumé

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!