Html iframe 中的样式图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15082459/
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
Styling image inside iframe
提问by DarrenVortex
I have an image inside an iframe by setting the src attribute of the iframe:
通过设置 iframe 的 src 属性，我在 iframe 中有一个图像：
<iframe src="path/to/my/image.jpg" class="myclass"></iframe>
The iframe has a fixed height and width. I want that image's width to fill the iframe, but its height would stay proportional to the width so the user would be able to scroll down the iframe to see the rest of the image.
How do I do this?
EDIT: JSFiddle link http://jsfiddle.net/2LExA/
iframe 具有固定的高度和宽度。我希望该图像的宽度填充 iframe，但其高度将与宽度成正比，因此用户可以向下滚动 iframe 以查看图像的其余部分。
我该怎么做呢？
编辑：JSFiddle 链接http://jsfiddle.net/2LExA/
回答by DarrenVortex
I set the src of the iframe to a page called show_image.php and passed the image url as query string:
我将 iframe 的 src 设置为一个名为 show_image.php 的页面，并将图像 url 作为查询字符串传递：
<iframe src="show_image.php?src=path/to/image.jpg" class="foobar"></iframe>
Then in the show_image.php, I dropped an img with its src set to the query string and width to 100%:
然后在 show_image.php 中，我删除了一个 img，其 src 设置为查询字符串，宽度设置为 100%：
<img src="<?php echo $_GET['src']; ?>" style="width:100%" />
Done! Thanks to lukeocom's hint for mentioning that I should put the image in a separate page.
完毕！感谢 lukeocom 提示我应该将图像放在单独的页面中。
回答by lukeocom
you use an iframe primarily to display a separate html page, which would contain an image. You would therefore use css for that page to style the image. You can use css to style the width of your iframe, but not its content.
您主要使用 iframe 来显示单独的 html 页面，其中将包含图像。因此，您可以为该页面使用 css 来设置图像的样式。您可以使用 css 来设置 iframe 的宽度样式，但不能设置其内容的样式。
Your other alternative is to place the image in a div, and style the image relative to that div.
您的另一种选择是将图像放在一个 div 中，并相对于该 div 设置图像的样式。
html
html
<div><img src="yourimg" /></div>
css
css
div{width:600px;height:300px;}
img{width:50%;}
