Question

我有一个图像，缩放适用于所有浏览器，但当我在iframe内打开时，缩放在IE和谷歌浏览器中停止工作，但在Firefox中工作正常。

如何解决此问题？

图片链接 - 在互联网上找到。

<iframe width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" src="http://www.dobble.net.au/help/template.jpg" style="align:left;vertical-align:top;border-width:0px;" name="AisIFrame"></iframe>

http://jsfiddle.net/qL75khzg/

Answer 1

即使Opera浏览器也受到同样问题的影响。这是一个影响IE和Chromium派生浏览器的问题（也许不仅仅是）。 Chrome和Opera都源自Chromium浏览器项目。在IE，FF，Op，Ch上测试问题后，Firefox是唯一一个行为正确的问题。我过去曾多次向相应的开发人员（但MS）发送错误通知，但据我所知，问题依然存在。

无论如何要尝试解决问题，请在iframe中插入另一个html / css页面，而不是将图像直接加载到iframe中，然后将图像加载到html标记内的html页面中，即＃34; img＆＃34;。比使用css样式表标记的样式，你希望给img你需要的大小。此外，根据您的需要，您可以评估将img标记包装到样式div中以包含img大小。如果正确完成de css part，img将按比例匹配容器div缩放，而不会缩小/变形。

完成后我们现在尝试执行缩放功能。好吧，这需要一个附加到你想要缩放的元素的javascript事件（例如div）。该活动将是＆＃34; onclick＆＃34; （或＆＃34;点击＆＃34;如果你想使用addEventListener js方法。你甚至可以在没有任何js的情况下使用＆＃34;：over＆＃34; css伪类（在示例中使用一次来比较不同的行为）。

以下示例将阐明整个技巧的工作原理：

＆＃13;

function zoom(el)
{
  var checksize = el.style.width == "100%";
  if (checksize)
      {
        el.style.width = "";
        el.style.height = "";
      }
      else
      {
        el.style.width = "100%";
        el.style.height = "100%";
      }
}

＆＃13;

.h
{
  float: left;
  width: 400px;
  height: 150px;
  background-color: blue;
}

.v
{
  float: left;
  height: 400px;
  width: 150px;
  background-color: yellow;
}

img
{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.v:hover
{
  float: left;
  width: 100%;
  height: 100%;
  background-color: blue;
}

＆＃13;

<div class="v" onclick="zoom(this)">
  <img src='http://download.4-designer.com/files/20150801/It-is-said-that-there-is-no-second-wave-of-copyright-free-image-collection-54650.jpg'/> 
</div>

<div class="h" onclick="zoom(this)">
  <img src='http://download.4-designer.com/files/20150801/It-is-said-that-there-is-no-second-wave-of-copyright-free-image-collection-54650.jpg'/> 
</div>

＆＃13;

另请注意，iframe不是唯一允许您显示外部内容的html标记（在本例中为图像）。事实上，你可以使用＆＃39; img＆＃39;标记本身，＆＃39;嵌入＆＃39;标签，＆＃39;对象＆＃39;标签，甚至是＆＃39; div＆＃39;标记或其他标记，接受要用图像设置样式的背景。在最后一种情况下，您可以通过设置其背景图像＆＃39;来显示图像。 css样式属性到你想要显示的图像。

缩放iframe内的图片无法在IE和Google Chrome上运行

1 个答案: