当我使用CSS3缩放iframes内容时，我几乎得到了正确的结果

我使用以下代码在一个网站内显示其他网站的微型实时版本：

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;
}

似乎高度和宽度属性也被缩放，所以我将它们设置为我的显示器的大小（这也是我希望它们显示的大小的4倍）。这导致iframe的大小为256px乘192px，但占用了页面空间，就好像它的大小为1024px乘768px一样。我通过定义iFrames包装器的大小解决了这个问题

---

我的问题是，如果它缩放了一个对象，为什么它仍然占据了它的原始空间？

如果我不得不猜测，我会说这个css：

width:1024px;
height:768px;

这就是原因。这会告诉iframe其尺寸为1024x768，因此，iframe会向浏览器报告这些尺寸。然后，浏览器将iframe视为占用了大量空间，并相应地进行渲染

---

为了验证，我建议使用Firefox中的Firebug或Chrome中的Developer Tools之类的工具，检查相关元素，看看它报告的维度是什么。

如果我不得不猜测，我会说这个css：

width:1024px;
height:768px;

这就是原因。这会告诉iframe其尺寸为1024x768，因此，iframe会向浏览器报告这些尺寸。然后，浏览器将iframe视为占用了大量空间，并相应地进行渲染

为了验证，我建议使用Firefox中的Firebug或Chrome中的Developer Tools等工具，检查相关元素，看看它报告的维度是什么。

解释 这有助于回答您的问题。下面的引文来自它

据我所知，css3转换的当前实现遵循两个模型中的第一个，具体来说：

调整受影响内容位置的转换 无需更改该内容的常规布局（非常类似于相对布局） 定位）

此外，它指出：

此模块定义一组影响视觉效果的CSS属性 渲染应用这些属性的元素；这些 在确定图元的大小和位置后应用效果 根据[CSS21]中的视觉格式模型

最后一句话的关键是“视觉渲染”。也就是说，虽然缩放（在您的例子中）在视觉上改变了它的外观，但它不会改变html本身流中对象的实际像素尺寸。如第一段所述，它很像使用

position:relative

移动的元素，其中元素占用的“空间”仍在其正常流动位置，但其视觉显示可能会移动到其他位置（通过

top:100px

或其他定位移动）

解决方案？ 更新：我删除了本节中的原始答案，因为测试表明它不起作用。因此，没有真正的解决方案来满足您的需求。

解释 这有助于回答您的问题。下面的引文来自它

据我所知，css3转换的当前实现遵循两个模型中的第一个，具体来说：

调整受影响内容位置的转换 无需更改该内容的常规布局（非常类似于相对布局） 定位）

此外，它指出：

此模块定义一组影响视觉效果的CSS属性 渲染应用这些属性的元素；这些 在确定图元的大小和位置后应用效果 根据[CSS21]中的视觉格式模型

最后一句话的关键是“视觉渲染”。也就是说，虽然缩放（在您的例子中）在视觉上改变了它的外观，但它不会改变html本身流中对象的实际像素尺寸。如第一段所述，它很像使用

position:relative

移动的元素，其中元素占用的“空间”仍在其正常流动位置，但其视觉显示可能会移动到其他位置（通过

top:100px

或其他定位移动）

解决方案？

---

更新：我删除了本节中的原始答案，因为测试表明它不起作用。因此，没有真正的解决方案来满足您的需求。

正如其他答案所指出的，css3转换只会更改元素的视觉渲染。但正如您所意识到的，您可以调整包装器的大小，使其他元素很好地就位

如果您想让它更易于管理，您可能需要尝试Zurb响应的YouTube iframe方法。他们就是这样做的：

调整iframe大小的最简单方法 因为他们知道youtube视频的纵横比，所以可以给“flex视频”包装高度：0；填充底部：67.5%。内部iframe/youtube视频的绝对定位宽度为：100%；高度：100%，自然反应灵敏。从这里，您可以通过设置包装器大小来控制iframe的宽度。您也可以为包装设置其他比率，例如宽度：100%；身高：0；填充底部：100%；，这基本上为您提供了一个方形框，以适合您的iframe

如果您需要使用CSS3缩放。。。 如果这不起作用，那么就剩下CSS3伸缩方法，这有点混乱，需要JS。我最近在一个响应性网站上使用谷歌广告时遇到了这个问题。为了说明这一点，我编写了一个轻量级的（而且还没有经过测试），通过将元素包装在相对定位的div中，使iframe具有响应性

它使用iframe的原始宽度及其相对定位的包装器的宽度来确定需要使用CSS3来缩小它的大小。除了应用CSS3缩放，它还使用相同的比率设置相对定位的包装高度。这确保了写在iframe下面的DOM中的元素按预期向上移动