html - IFrame 图像大小调整

标签 html iframe compatibility

在任何现代浏览器中,当您访问图像 url(例如 http://i.imgur.com/xrM9q.jpg )时,它会自动调整该图像的大小并为您提供使用小放大镜“放大”的选项。 iframe 并非总是如此:

<iframe src='http://i.imgur.com/xrM9q.jpg'> </iframe>

如果你将一个 iframe 链接到一个图像,Firefox 会给出这个很好的行为:它开始表现得像 max-width: 100%; max-height: 100%,然后点击变大即可。

但是,在 Chrome 中,图像只是全尺寸。尝试打开 this example在 Chrome 和 Firefox 中。

如何让 Chrome 浏览器“巧妙地”处理图像?也就是说,默认行为是否显示放大镜光标并提供自动调整大小?

(澄清一下:我希望它在 Chrome 扩展程序中工作。到目前为止,我想出的唯一解决方案是在所有页面上放置一个内容脚本,然后手动更改页面上图像的样式。那个解决方案很糟糕,所以我希望有一种不那么骇人听闻并且不会影响用户访问的每个页面的方法)

最佳答案

尝试让 iframe 引用另一个 html 文件,并在该 html 文件中放置带有宽度和高度约束的 img 标签。我认为这种方式适用于大多数浏览器。

关于html - IFrame 图像大小调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10589055/

相关文章:

html - 下拉菜单悬停状态

java - 在加载 index.jsp 之前调用 Controller

javascript - 将 Iframe 用于服务器上的另一个文件是否会使当前页面加载速度比直接在页面上加载更快?

javascript - $.fn.submit() 事件不会在 &lt;iframe&gt; 中触发

silverlight - 我可以在 Silverlight 4 项目和标准 ClassLibrary 中使用相同的对象吗?

html - 悬停时如何替换div但不改变其他div

javascript - 如何将 HTML5 麦克风输入捕获到 icecast?

javascript - 如何在 iFrame body 标记上设置 jQuery data() 并从 iFrame 内部检索它?

IE7 中的 jquery 幻灯片问题

java - Java 7 中 Java 8 的功能接口(interface)