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
div is still needed, otherwise the outer size and inner size of the frame mismatches
- The wrapping
div and the wrapped iframe need to have the same dimensions (so unlike the Stack Overflow answers, no need to scale the width/height of the div; keep the same values as the iframe)
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 