Date : 10th June 2024

For all the latest browsers

iframe object-fit:cover



iframe object-fit:contain

Video by Ambient Press

Information

Now that we have container-type: size; @container () with sizing cqw and cqh, it is fairly simple to emulate object-fit:cover and object-fit:contain for iframes.

container-type
container queries
container query length units cqw and cqh

So using this information we can control the size of an element content to either fit the content size so thaat it is always visible, or fill the element so that any oversize is hidden.

With the above containers just resize the browser window to see the top iframe always cover the container and the lower iframe always stay visible.

Please consider making a donation, every little helps.