Responsive Iframes

Embed CSS-Tricks website<iframe></iframe> The tagging method is as follows:

<iframe src="https://css-tricks.com"></iframe>

By default,<iframe></iframe> It will be displayed as a 300 pixel wide and 150 pixels high rectangle. This is not a setting in the user agent style sheet, but<iframe></iframe> Some magical feature of (and other objects). This is usually not the result we want, so it is usually<iframe></iframe> Add width and height attributes directly to the tag (this is what YouTube does).

<iframe height="315" src="https://css-tricks.com" width="560"></iframe>

While these properties are a good start, reserved space closer to the final display size, they are fixed values ​​and are not responsive layouts. Remember, layout jitter is bad.

Currently, responsive<iframe></iframe> The best way to do this is to create a scale box. First, a parent element with relative positioning is needed.<iframe></iframe> Place it in the parent element as a child element and apply absolute positioning to fill the parent element area. The key is that the height of the parent element is determined by the pseudo-element based on the proportion. The advantage of this approach is that it adapts to the content by resizing the element, rather than forcing a specific height. When the internal content height exceeds the proportional calculation, it can grow instead of overflow.

Here is a complete sample code (also applicable to images):

[The complete sample code should be inserted here. Since the code cannot be run directly, please add it yourself]

Every time we process proportions, we think of better ways to deal with them in the future. For example, the experimental intrinsicsize property, I think it works well in addition to pictures, too<iframe></iframe> . In addition, there is a CSS aspect-ratio attribute that hopes to be launched soon, which can use width and height attributes of the element by default, and I hope this can also be extended to<iframe></iframe> .

The above is the detailed content of Responsive Iframes. For more information, please follow other related articles on the PHP Chinese website!