When I use CSS3 to scale an iframes contents I get ALMOST the right result

问题

I have used the following code to display miniature, live versions of other websites inside of one site:

iframe {
    -moz-transform: scale(0.25, 0.25); 
    -webkit-transform: scale(0.25, 0.25); 
    -o-transform: scale(0.25, 0.25);
    -ms-transform: scale(0.25, 0.25);
    transform: scale(0.25, 0.25); 
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    border: solid #ccc 10px;
    width:1024px;
    height:768px;
}

It seems that the height and width properties are also scaled, so I have made them the size of my monitor (which is also 4 times the size I want them to be displayed). This results in the iframe being 256px by 192px but taking up space on the page as if it was 1024px by 768px. I have solved this by defining the size of the iFrames wrapper.

My question is, why, if it has scaled an object, does it still take up its original space?

回答1:

An Explanation

The W3C document helps to answer your question. Quotes below come from it.

The current implementation (to my knowledge) of css3 transforms follows the first of two models, specifically:

transformations that adjust the position of the affected content without changing the normal layout of that content (much like relative positioning)

Further, it states:

This module defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21].

The key to that last quote is "visual rendering". That is, while the scaling (in your case) visually changes its looks, it does not change the actual pixel dimensions of the object within the flow of the html itself. As the first quote noted, it is much like an element shifted using position: relative where the "space" the element takes up is still in its normal flow position, but the visual display of it may be shifted elsewhere (by a top: 100px or other positioning shift).

A Fix for Your Scenario?

Update: I deleted my original answer in this section as testing showed it to not work. So there is no real solution to do what you desire.

回答2:

If I had to guess, I'd say that this css:

width:1024px;
height:768px;

Is the cause of this. This tells the iframe that its dimensions are 1024x768, and, as a result, these are the dimensions the iframe reports to the browser. The browser then treats the iframe as if it takes up this amount of space and renders it accordingly.

To verify, I'd suggest using a tool like Firebug in Firefox or the Developer Tools in Chrome and inspecting the element in question to see what it's reporting its dimensions to be.

回答3:

As the other answers have noted, css3 transforms only change the visual rendering of the element. But as you've realized, you can resize the wrapper to make the other elements fall in place nicely.

If you want it to be a little more manageable, you might want to try the Zurb Responsive-YouTube-iframe approach. This is how they do it:

Easiest approach to resizing an iframe

.flex-video {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
    margin-bottom: 16px;
    overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}

Since they know the aspect ratio of the youtube video, they can give the 'flex-video' wrapper height:0; padding-bottom:67.5%. The inner iframe/youtube video is given an absolute positioning with width:100%; height:100%, which naturally allows it to be responsive. From here, you could control the width of the iframe by setting the wrapper size. You can set other ratios to the wrapper too, like width:100%; height:0; padding-bottom:100%;, which basically gives you a square box to fit your iframe into.

If you need to use CSS3 scaling...

If that doesn't work, then that leaves the CSS3 scaling approach, which is a bit messier and requires JS. I recently ran into this issue while trying to use Google ads on a responsive website. To account for this, I wrote a lightweight (and pretty untested) jQuery plugin that makes iframes responsive by wrapping the element in a relatively positioned div.

It uses the original width of the iframe and the width of its relatively-positioned wrapper to find how much it needs to use CSS3 to scale it down. Along with applying the CSS3 scaling, it set the relatively-positioned wrapper's height using the same ratio. This ensured that elements in the DOM written below the iframe moved up as expected. This is all based on the original width/height ratio of the iframe, so those attributes have to be available. It still need some refactoring, but if you need to perhaps you can modify it to better fit your needs.

If you need to use or modify it, here it is:

Rad.js - Responsive Ad Plugin

来源：https://stackoverflow.com/questions/11264790/when-i-use-css3-to-scale-an-iframes-contents-i-get-almost-the-right-result

标签

css

iframe

scaling