html - 在 iframe 中设置图像样式

Question

通过设置 iframe 的 src 属性，我在 iframe 中有一个图像：

<iframe src="path/to/my/image.jpg" class="myclass"></iframe>

iframe 具有固定的高度和宽度。我希望该图像的宽度填充 iframe，但它的高度将与宽度保持成比例，因此用户可以向下滚动 iframe 以查看图像的其余部分。
我该怎么做呢？
编辑：JSFiddle 链接http://jsfiddle.net/2LExA/

Answer 1

我将 iframe 的 src 设置为名为 show_image.php 的页面，并将图像 url 作为查询字符串传递：

<iframe src="show_image.php?src=path/to/image.jpg" class="foobar"></iframe>

然后在 show_image.php 中，我删除了一个 img，其 src 设置为查询字符串，宽度设置为 100%：

<img src="<?php echo $_GET['src']; ?>" style="width:100%" />

完毕！感谢 lukeocom 提示我应该将图像放在单独的页面中。

Answer 2

您主要使用 iframe 来显示一个单独的 html 页面，该页面将包含一个图像。因此，您将对该页面使用 css 来设置图像样式。您可以使用 css 设置 iframe 的宽度，但不能设置其内容。

您的另一种选择是将图像放在 div 中，并相对于该 div 设置图像的样式。

html

<div><img src="yourimg" /></div>

css

div{width:600px;height:300px;}
img{width:50%;}