在 iframe 中设置图像样式答案

【问题标题】：Styling image inside iframe在 iframe 中设置图像样式
【发布时间】：2013-02-26 06:05:17
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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 提示我应该将图像放在单独的页面中。

【讨论】：

【解决方案2】：

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

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

html

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

css

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

【讨论】：

iframe 是动态加载到页面中的，我为每个 iframe 使用不同的 src 值。
我通过将 src 设置为一个名为 show_image.php 的 php 页面来解决它，然后将图像 url 作为查询字符串传递。在页面中，我删除了一个 img 并将其 src 设置为传递的查询字符串，并将其宽度样式设置为 100%。这成功了，这要归功于您对图像使用另一个页面的提示。 +1，但我将发布我自己的答案，因为这还不完整。