Question

我想在我的网页上的iframe中显示图片。但是，问题在于我无法将其扩展到100％的大小。

我想做的是以下内容。

在我的网页上有一个iframe。
在iframe中调用图片。
将图片展开为全尺寸，作为反应，iframe允许我滚动。
我的网页上没有任何滚动条

目前，这是我的代码：

echo"<iframe name='graph' id='graph' src=$image style='position:absolute; top:0px; left:0px; height:100%;width:100%'></iframe>";

这样做是为了让iframe成为我网页的首选，但仍然没有扩展到100％。如果我删除位置：绝对代替：

echo"<iframe name='graph' id='graph' src=$image style='top:0px; left:0px; height:100%;width:100%'></iframe>";

我最终将它的宽度扩展到100％，但就高度而言，它只有3个像素高，并且有一个滚动条可以滚动到底部。

我在网上搜索寻找修复，但没有尝试过。有人提到改变CSS，但无济于事......

修改

我面临的另一个问题是Firefox中的图像缩小。我需要点击iframe中的图片将其展开到完整尺寸。它虽然在Chrome和IE中正确显示。有没有解决这个问题？

Answer 1

使用下面的代码来显示图像。

<iframe frameborder="0" scrolling="no" width="100%" height="100%"
   src="../images/eightball.gif" name="imgbox" id="imgbox">
   <p>iframes are not supported by your browser.</p>
</iframe><br />


<a href="../images/redball.gif" target="imgbox">Red Ball</a><br />
<a href="../images/floatingball.gif" target="imgbox">Floating Ball</a><br />
<a href="../images/eightball.gif" target="imgbox">Eight Ball</a>

Answer 2

您可以使用一些JavaScript来检测iframe内容的大小并调整iframe的大小。

Answer 3

将此添加到主页的CSS：

body, html {
   height:100%   
}

Answer 4

容器（封闭的div，如果你没有容器，你应该创建一个，）似乎是限制iframe的高度。尝试将容器的高度设为100％。

Answer 5

您的问题是您是直接嵌入图像资源。

这永远不会按照你想要的方式运作。图像始终是原始尺寸。

您需要将iframe的src属性设置为具有自己body的单独HTML文件，并围绕图像。然后你可以使用CSS在体内给它100％的宽度和/或高度。

Answer 6

如果您可以在本地访问图像，则可以使用php GD功能...

$img_rsrc = imagecreatefromjpeg($path_to_image);
// or imagecreatefrompng, imagecreatefromgif, etc, depending on the type of your image
$height = imagesy($img_rsrc);
$width = imagesx($img_rsrc);
imagedestroy($img_rsrc);

然后根据高度和宽度设置iframe的大小（以像素为单位）。您可能需要在高度和宽度上添加一点来计算边距。

Answer 7

确保您通过DOM设置100％的高度..请参阅 http://api.fatherstorm.com/test/iframe.php

和 http://api.fatherstorm.com/test/iframe2.php

有嵌入页面（CNN）或图像

的示例

在Iframe中显示图像

7 个答案: