Unwanted space when scaling down an iframe

Question

I'm just trying to scale down an iframe: http://jsfiddle.net/ck8Lk/

<iframe src="http://www.swpc.noaa.gov/rt_plots/kp_3d.html" scrolling="no"  width="600" height="500"
            style="padding: 0px; margin: 0px; zoom: 0.25; -moz-transform: scale(0.25); -moz-transform-origin: 0 0; -o-transform: scale(0.25); -o-transform-origin: 0 0; -webkit-transform: scale(0.25); -webkit-transform-origin: 0 0;">
</iframe>right content<br>bottom content

Scaling itself works fine but my problem is that after scaling the iframe still requires the original space. Setting margin and padding to 0 did not help. Firebug selects the scaled area only when I hover the iframe element. How can I remove the space at the right and at the bottom? What I really want to is to keep the original size but only scale down the content so that it still fills the space. But obviously it's not possible to access the CSS of the iframe's content. Any advice is appreciated. Best regards - Ulrich

I guess that might help you: http://stackoverflow.com/a/3131624/2328888 — TheFrozenOne, Jul 29 '14 at 18:24
See: http://stackoverflow.com/questions/11264790/when-i-use-css3-to-scale-an-iframes-contents-i-get-almost-the-right-result Short answer is that it's not possible. — Vorenus, Jul 29 '14 at 18:33
Hallo Doodlebunch! Perfect, that works fine. Thanks a lot! Should have come across that on my own. — Ulrich Bangert, Jul 29 '14 at 19:30

Unwanted space when scaling down an iframe

0 Answers0