Analyze the method of iframe adaptation in web responsive layout

Question
atResponsive In layout , we should be careful with iframe elements. The iframe element's width and height attributes set its width and height, but when the containing block When the width or height is smaller than the width or height of the iframe, the iframe element will overflow:



Such an overflowing iframe will destroy the layout of the page. We can use a method. Let the iframe element also be responsive, wait and see.

Solution
The iframe element itself cannot be retracted unless its width is set through js display. But we can pass an iframe- container element to wrap the iframe, while letting the width of the iframe-container element fill the width of the containing block, and set the padding-bottom percentage of the iframe-container element according to the aspect ratio of the iframe. #In fact, the essence of this method is to set the padding-bottom attribute of the iframe-container element. The purpose of setting this attribute is to set the height of the element in disguise, because setting the percentage for padding-bottom is relative to the width of the parent element. To put it bluntly, if the height attribute is set as a percentage, it is relative to the height of the parent element. We usually use the default auto for the height value of the parent element, so the height of the child element will also be 0. Therefore, we can only give padding-bottom Set the attribute. This way, just fill the iframe-container with the iframe element

##

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

The result is displayed:

When the viewport width is greater than 400px:

When the viewport width is less than 400px:




Summarize

The above is the detailed content of Analyze the method of iframe adaptation in web responsive layout. For more information, please follow other related articles on the PHP Chinese website!