html – How can I scale the content of an iframe? – Stack Overflow
Posted by jpluimers on 2021/08/19
I used [WayBack] html – How can I scale the content of an iframe? – Stack Overflow as starting point to scale some iframes.
In my case, I had to scale up (by a 25% so a factor 1.25) instead of scale down.
What I observed so far in recent Chrome versions is:
- The wrapping
divis still needed, otherwise the outer size and inner size of the frame mismatches - The wrapping
divand the wrappediframeneed to have the same dimensions (so unlike the Stack Overflow answers, no need to scale thewidth/heightof thediv; keep the same values as theiframe)
The div uses class calendar_wrap.
The iframe uses class calendar_iframe.
This is part of my CSS:
body { margin: 0; /* override browser setting for body `margin: 8px;` */ overflow: hidden; /* remove scroll bars; does not work for iframes */ } /* ... */ iframe { border-width: 0; /* override browser setting for iframe `border-width: 2px; */ height: 100vh; width: 50vw; overflow: hidden; /* remove scroll bars; does not work for iframes */ } /* wrap and iframe zoom as per https://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe */ .calendar_wrap { float: left; height: 70vh; width: 35vw; /* calc(35vw / 1.25); */ padding: 0; background-color: blue; } .calendar_iframe { float: left; width: 35vw; -ms-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); -ms-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } /* ... */
–jeroen
The Wiert Corner - irregular stream of stuff 
Leave a comment