Question

HTML：

<div>
<img src="Comp.png" id="comp"><iframe width="700"   
height="526"src="http" frameborder="0" allowfullscreen>    
</iframe>
</div>

CSS：

#comp {
display: block;
height:700px;
width: 800px;
margin-left: auto;
margin-right: auto;
}

iframe {
display: block;
height: 385px;
width: 752px;
padding-bottom: 5%;
}

目前iframe没有显示出来。以前我曾使用边距定位将其放入计算机图像中，但是当浏览器窗口调整大小时，它会完全抛弃所有内容。有人可以提供任何输入吗？感谢帮助。感谢

JSfiddle：http://jsfiddle.net/bKPKh/

Answer 1

我将图像和iframe包装在具有相对位置的div中。此外，我已将iframe包装在具有绝对位置的div中，并使用左侧和顶部将其固定在图像上方。以下是我的代码示例：

<div class="container">
<img src="http://i.imgur.com/Et22afT.png" height="200" width="200" />
<div class="frame">
    <iframe src="http://www.bbc.co.uk" height="120" width="181"></iframe>
</div>

.container {
    position:relative;
}
.frame {
    position:absolute;
    left:9px;
    top:15px;
}

http://jsfiddle.net/7Beaa/

Answer 2

OP，您是否考虑过具有相对定位的包装器，并对孩子使用绝对定位？

相对定位将其定位为正常，但沿两个轴移动了一定数量的像素（这些数字可能为0）。另一方面，绝对定位将一个元素完全从正常定位中取出（有点像在Photoshop中将某些东西放在一个新图层上）并将其相对于最近的祖先定位，而不是静态定位（这是默认值），如果没有，则为整个文档。

令人困惑，我知道！关键是使用position:relative; top:0px; left:0px;的包装器将完全像普通（...大多数）一样工作，但是您可以使用绝对定位将子元素放在其中的任何位置。您需要手动设置包装器的height和width，因为正如我所说，绝对定位的子项是另一个“层”，所以它们不会影响到主要“层”。

试图在计算机图像中拟合iframe

2 个答案: