Shulou(Shulou.com)06/01 Report--

Editor to share with you how CSS enables iframe to achieve a high degree of self-adaptive effect. I hope you will get something after reading this article. Let's discuss it together.

Iframe adaptive height

For demonstration purposes, this article will use video to embed our iframe. First, visit the video URL, click "share" under the video, and then click "embed". The specific code is as follows:

Next, we need to delete width= "560" height= "315" because this is setting the size of the iframe. Since we need to set our own dimensions, we don't need to do this.

Use CSS

After that, we need to put iframe in another html element, which is very important because this element will resize your iframe. Then add the CSS class to the wrapper element and a class to the iframe, as shown below.

Define the wrapper class using the following styles:

. resp-container {

Position:relative

Overflow:hidden

Padding-top:56.25%

}

The location of position:relative and iframe is very important here. Position:relative so that we can associate the iframe with the wrapper element later. This is because in CSS, position:absolute locates elements based on the nearest non-static parent element.

Whether overflow:hidden hides any elements that might be placed outside the container.

Padding-top:56.25%, that's the point. In CSS, the padding-top property sets the percentage, which keeps our iframe at the correct ratio. By using a percentage, it calculates the fill to use based on the width of the element. In our example, we want to maintain a ratio of 56.26%, but other rates can also be used.

Define the iframe class as follows:

. resp-iframe {

Position:absolute

Top:0

Left:0

Width:100%

Height:100%

Border:0

}

Position:absolute; this will provide the iframe with a location relative to the wrapper and place it on the wrapper's fill.

Top:0 and left:0 are used to position the iframe in the center of the container.

Width:100% and height:100% make IFRAME take all the packing space.

When you are done, you should get a response iframe.

Summary: in this article, we have seen techniques that allow iframe to achieve a high degree of adaptation. As you can see, it's actually very simple, and hopefully this article will save you hours of trial time.

After reading this article, I believe you have a certain understanding of "how CSS enables iframe to achieve a high degree of self-adaptive effect". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.