在 iframe 中显示图像

Posted 2023-03-05

【中文标题】在 iframe 中显示图像

【英文标题】：Displaying image in Iframe

【发布时间】：2011-05-08 03:51:40

【问题描述】：

我想在网页的 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 中正确显示。有解决办法吗？

【问题讨论】：

为什么首先将图像放在 iframe 中？这样做会使它们超出您页面上的 CSS 规则或 javascript 的范围，严重限制了您对自己页面的控制。

Dan，我不希望我的大图像在我的页面中引入滚动条。我知道这可能不是最好的方法......

然后将它们放在一个具有固定最大尺寸的 div 中，设置它的溢出属性以便它获取滚动条而不是您的页面，并在加载后使用 JavaScript 调整图像大小以适应 div 和消除滚动条。将图像放入 iframe 会剥夺您执行此类操作的能力。

【参考方案1】：

将此添加到您的主页的 CSS：

body, html 
   height:100%   

【讨论】：

这可能取决于您的 HTML 的其余部分。

这行不通，因为他是直接嵌入图像，将其置于当前文档的上下文之外。

【参考方案2】：

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

【参考方案3】：

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

【讨论】：

iframe 在表格中。而且表格确实有一个 的属性。

【参考方案4】：

你的问题是你直接嵌入了一个图片资源。

这永远不会按照您想要的方式工作。图像始终是原始大小。

您需要将 iframe 的 src 属性设置为一个单独的 HTML 文件，该文件带有自己的 body，环绕图像。 然后你可以使用 CSS 给它 100% 的宽度和/或高度。

【讨论】：

嗯，而不是仅仅为了显示图像而创建另一个页面。有没有我可以研究的替代方案？所有，我真正想做的就是让我现有的页面保持无滚动，并且能够滚动我的图像......

@12345 为什么不使用div 和overflow: auto？

@FatherStorm 好，然后告诉我你如何将该图像自动调整为 iframe 的宽度？

【参考方案5】：

如果您可以在本地访问图像并且可以使用 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 的大小（以像素为单位）。您可能需要在高度和宽度上增加一点以考虑边距。

【讨论】：

啊...我认为它有效。不幸的是，迈克没有。如果图像足够大，它确实会为我的整个页面添加滚动，而不仅仅是 iframe ...

我面临的另一个问题是图像在 Firefox 中被缩小了。我需要单击 iframe 中的图像以将其扩展为完整大小。它虽然在 Chrome 和 IE 中正确显示。有解决办法吗？

这是 Firefox 的功能，因为 iframe 太小而无法显示整个画面。我不知道有什么方法可以抑制这种情况。至于之前的评论，我认为您应该研究一下 JavaScript 解决方案。

【参考方案6】：

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

<iframe frameborder="0" scrolling="no"  
   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>

【讨论】：

属性 'frameborder' 和 'scrolling' 在 HTML5 中都已过时，留下 CSS 作为替代