1

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

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 为 256 像素 x 192 像素，但占用了页面上的空间，就好像它是 1024 像素 x 768 像素一样。我通过定义 iFrames 包装器的大小解决了这个问题。

我的问题是，为什么如果它已经缩放了一个物体，它仍然会占用它原来的空间吗？

4

3 回答 3

1

一个解释

W3C 文档有助于回答您的问题。下面的引用来自它。

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

调整受影响内容的位置而不改变该内容的正常布局的转换（很像相对定位）

此外，它指出：

该模块定义了一组 CSS 属性，这些属性会影响应用这些属性的元素的视觉呈现；这些效果在元素根据 [CSS21] 中的视觉格式化模型调整大小和定位后应用。

最后一句话的关键是“视觉渲染”。也就是说，虽然缩放（在您的情况下）在视觉上改变了它的外观，但它不会改变 html 本身流中对象的实际像素尺寸。正如第一个引用所指出的，它很像一个元素使用position: relative元素占据的“空间”仍处于其正常流动位置的位置进行移动，但它的视觉显示可能会在其他地方移动（通过一个top: 100px或其他定位移动）。

解决方案？

更新：我删除了本节中的原始答案，因为测试表明它不起作用。所以没有真正的解决方案来做你想做的事。

于 2012-06-29T16:46:21.897 回答
0

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

width:1024px;
height:768px;

是这个原因。这告诉 iframe 它的尺寸是 1024x768，因此，这些是 iframe 向浏览器报告的尺寸。然后，浏览器将 iframe 视为占用了这么多空间并相应地呈现它。

为了验证，我建议使用像 Firefox 中的 Firebug 或 Chrome 中的开发者工具这样的工具，并检查有问题的元素，看看它报告的尺寸是什么。

于 2012-06-29T16:03:19.950 回答
0

正如其他答案所指出的，css3 转换只会改变元素的视觉呈现。但是正如您所意识到的，您可以调整包装器的大小以使其他元素很好地放置在适当的位置。

如果您希望它更易于管理，您可能想尝试使用 Zurb Responsive-YouTube-iframe 方法。他们是这样做的：

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

因为他们知道 youtube 视频的纵横比，他们可以给 'flex-video' 包装器高度：0；填充底部：67.5%。内部 iframe/youtube 视频被赋予绝对定位宽度：100%；height:100%，这自然允许它响应。从这里，您可以通过设置包装器大小来控制 iframe 的宽度。您也可以为包装器设置其他比率，例如 width:100%; 高度：0；padding-bottom:100%;，它基本上给你一个方框来适应你的 iframe。

如果您需要使用 CSS3 缩放...

如果这不起作用，那么就剩下 CSS3 缩放方法，这有点混乱并且需要 JS。我最近在尝试在响应式网站上使用 Google 广告时遇到了这个问题。为了解决这个问题，我编写了一个轻量级（并且未经测试）的jQuery 插件，它通过将元素包装在相对定位的 div 中来使 iframe 具有响应性。

它使用 iframe 的原始宽度和其相对定位的包装器的宽度来查找使用 CSS3 缩小它需要多少。除了应用 CSS3 缩放，它使用相同的比率设置相对定位的包装器的高度。这确保了写在 iframe 下方的 DOM 中的元素按预期向上移动。这一切都基于 iframe 的原始宽度/高度比，因此这些属性必须可用。它仍然需要一些重构，但如果您需要，也许您可​​以修改它以更好地满足您的需求。

如果您需要使用或修改它，这里是：

Rad.js - 响应式广告插件

于 2013-06-18T07:57:12.360 回答