html - 使 iframe 默认图片与空白 iframe 大小相同

Question

我不确定这是否可行，但我将 iframe 设置为相对。我的问题是如何将默认图像设置为自动调整为 iframe 的大小？编码...

<iframe name="iframe1"src="../Pictures/coolcenturylink.jpg" height="%"width="%"/></iframe>


iframe
{
position:relative;
float:right;
height:80%;
width:84.5%;
top:%;
background-color:;
}

下面的编辑点...

<img src="coolcenturylink.jpg"/>

.coolcenturylink.jpg
{
    max-width: 100%;
}

<iframe name="iframe1"src="../Pictures/coolcenturylink.html"></iframe>

Answer 1

iframe 包含与您网站不同的内容。您不能将 css 传递到 iframe中，因此无法定位您从该端加载的图像。

您可以在从中加载图像的页面上设置页面中的图像样式。如果您只使用图像创建第二个 html 页面并将 css 应用到它那里，它将与它一起加载。

工作示例 http://jsfiddle.net/KArXd/

在 iframe 中加载的图像页面：http: //jsfiddle.net/NsJyR/

您仍然遇到高度问题。

我不确定为什么要使用 iframe 加载图像，但是如果将其更改为 img 标签，则可以应用最大宽度。

.your-image {
    max-width: 100%;
}