Question

我一直在尝试使用iframe在我的网站上提供其他网站的实时缩略图。我已设法编码iframe，以便缩小它们，但它们仍然“占据”原始大小的空间。主要的问题是，由于我的iframe定位（浮动：右），它们迫使我的网站延伸到较小设备的屏幕边缘。底部的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。

如果有帮助，请告诉我。

编辑：更新小提琴

变形（缩小）的iframe即使在div中也会占用空间

1 个答案: