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%;}