html - 即使在 div 中，转换(缩小)的 iframe 仍然占用空间

Question

我一直在尝试使用 iframe 在我的网站上提供其他网站的实时缩略图。我已经设法对 iframe 进行编码，使它们按比例缩小，但它们仍然“占用”了原始大小的空间。主要问题是，由于我的 iframe 位置( float :右)，它们迫使我的网站在较小的设备上扩展到屏幕边缘之外。底部 iframe 也将屏幕边缘推到我的粘性页脚下方，导致页脚不再粘在底部。

我试过将 iframe 包含在 div 中以限制大小，但这似乎没有什么区别。

这是我的 HTML:

<div class='frameLimit'>
    <iframe src='http://www.theinkslinger.co.uk' class='thumbs' scrolling='no'>
        <p class='smaller'>Your browser does not support iframes</p>
    </iframe>
</div>

<h3 class='port'>The Ink Slinger</h3>
<p class='smaller'>My personal website and blog</p>

这是我的 CSS:

iframe.thumbs {
overflow: hidden;
width: 960px;
height: 480px;
margin: 0;
padding: 0;

border: #49483e solid 0.25em;
border-radius: 1em;

-moz-transform: scale(.3);
-webkit-transform: scale(.3);
-o-transform: scale(.3);
transform: scale(.3);

-moz-transform-origin:0 0;
-webkit-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;

}


p.smaller {
font-size: large !important;
}

h3.port {
padding: 0 0 0 20px;
margin: 0 auto 0 auto;

text-align: left;
color: #ffffff;
font-family: sans-serif;

text-shadow: 0px 1px 0px #000000;
}

.frameLimit {
width: 320px !important;
height: 160px !important;

padding: 0;
margin: 0;

float: right;
margin-right: 20px;
}

如有任何建议，我将不胜感激!

Answer 1

我想我用容器本身的 overflow:hidden 解决了你的问题。我还相应地缩小了它的宽度和高度。

还添加了

.bottom { clear: both; }

到你的底层部门。

检查这个jsfiddle .

如果有帮助，请告诉我。

编辑:更新 fiddle