php 在 Iframe 中显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4149469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying image in Iframe
提问by 12345
I want to display an image within an iframe on my webpage. However, the problem is that I can't get it to expand to 100% of its size.
我想在我的网页上的 iframe 中显示图像。但是，问题是我无法将其扩展到其大小的 100%。
What I want to do is the following.
我想做的是以下内容。
- Have an iframe on my webpage.
- Call an image within the iframe.
- Make the image expand to full-size and as a reaction, the iframe allows me to scroll.
- Not have any scroll bars on my webpage
- 在我的网页上有一个 iframe。
- 在 iframe 中调用图像。
- 使图像扩展到全尺寸，作为一种反应，iframe 允许我滚动。
- 我的网页上没有任何滚动条
Currently, here's the code I have:
目前，这是我的代码：
echo"<iframe name='graph' id='graph' src=$image style='position:absolute; top:0px; left:0px; height:100%;width:100%'></iframe>";
What this does is that, it makes the iframe come on top of my webpage and still doesn't expand to 100%. If i remove the position:absolute instead:
这样做的作用是，它使 iframe 位于我的网页之上，但仍然没有扩展到 100%。如果我删除 position:absolute 代替：
echo"<iframe name='graph' id='graph' src=$image style='top:0px; left:0px; height:100%;width:100%'></iframe>";
I end up getting it to expand in width to 100%, but in terms of height, it is just 3 pixels high and there is a scrollbar to scroll to the bottom.
我最终让它的宽度扩展到 100%，但就高度而言，它只有 3 个像素高，并且有一个滚动条可以滚动到底部。
I scoured the web looking for a fix, but nothing I tried works. Some mentioned changing CSS as well, but to no avail ...
我在网上搜索寻找修复程序，但我尝试的任何方法都不起作用。有些人也提到了更改 CSS，但无济于事......
EDIT
编辑
Another problem I face is that the image is zoomed outin Firefox. I need to click on the image within the iframe to expand it to its full size. It shows up correctly in Chrome and IE though. Is there a fix for this?
我面临的另一个问题是图像在 Firefox 中被缩小了。我需要单击 iframe 中的图像以将其展开为完整尺寸。虽然它在 Chrome 和 IE 中正确显示。有没有办法解决这个问题？
回答by Ram
use below code to to display image.
使用下面的代码来显示图像。
<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>
回答by Dan Grossman
You can use some JavaScript to detect the size of the iframe contents and resize the iframe.
您可以使用一些 JavaScript 来检测 iframe 内容的大小并调整 iframe 的大小。
回答by erkmene
The container (the enclosing div, if you don't have a container you should create one,) seems to be what is limiting the height of the iframe. Try making the height of the container 100%.
容器（封闭的 div，如果您没有容器，则应该创建一个容器）似乎是限制 iframe 高度的原因。尝试将容器的高度设为 100%。
回答by Pekka
Your problem is that you are directly embedding an image resource.
您的问题是您直接嵌入图像资源。
This is never going to work the way you want. The image is always going to be original size.
这永远不会以您想要的方式工作。图像始终为原始尺寸。
You need to set the srcproperty of the iframe to a separate HTML file with a bodyof its own, wrapping around the image. Thenyou can give it 100% width and/or height inside the body using CSS.
您需要src将 iframe的属性设置为一个单独的 HTML 文件body，它有自己的 ，环绕图像。然后，您可以使用 CSS 在主体内部为其提供 100% 的宽度和/或高度。
回答by Mike C
IF you have access to the image locally AND you can use the php GD functions...
如果您可以在本地访问图像并且可以使用 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);
Then set the size of your iframe in pixels based on the height and width. You may have to add a bit to the height and width to account for margins.
然后根据高度和宽度以像素为单位设置 iframe 的大小。您可能需要在高度和宽度上添加一点以考虑边距。
回答by Diodeus - James MacFarlane
Add this to your main page's CSS:
将此添加到您的主页的 CSS：
body, html {
height:100%
}
回答by FatherStorm
make sure you are setting 100% heights on everything though the DOM.. see http://api.fatherstorm.com/test/iframe.php
确保您通过 DOM 为所有内容设置 100% 高度。请参阅 http://api.fatherstorm.com/test/iframe.php
and http://api.fatherstorm.com/test/iframe2.php
和 http://api.fatherstorm.com/test/iframe2.php
for examples with either a embedded page (CNN) or an image
例如带有嵌入页面 (CNN) 或图像的示例
