Chrome中的requestFullscreen:图片仍然很小

Question

我正在关注SitePoint的这个很棒的教程,以实现我网站上一些图像的全屏点击.

我的代码与SitePoint提供的示例非常相似,但这是我的代码:

HTML

<figure class="fullscreenOnClick">
    <img src="https://dw-uploads.s3.eu-central-1.amazonaws.com/photos/originals/359c0687ae12e32bb5f26f2005763b73">
</figure>

JS

$('.fullscreenOnClick').on('click', function(e) {
    e.preventDefault;

    var elem = this;
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    } else {
        alert("Sorry, your browser is too old and doesn't support fullscreen :-(")
    }
});

http://jsfiddle.net/xnyj9wr5/(不工作 - 再次,请参阅SitePoint示例)

问题

我的问题是Firefox和IE会像我期望的那样显示全屏图像:图像以原始大小显示,居中.

Chrome导致问题:图像只是在黑色背景上居中,保持其当前大小.

如何让Chrome像Firefox和IE一样全屏？

请注意:我必须将全屏效果应用于外部元素,而不是img本身,否则图像会被拉伸.

Answer 1

你的figure元素有一个样式width: 30%.这导致了Chrome中的问题.

根据MDN的"演示差异"部分:

值得注意的是Gecko和WebKit实现之间的关键区别:Gecko会自动将CSS规则添加到元素中以拉伸它以填充屏幕:"width:100%; height:100%".WebKit不这样做; 相反,它将全屏元素以相同的大小居中在屏幕上,否则为黑色.要在WebKit中获得相同的全屏行为,您需要添加自己的"宽度:100%;高度:100%;" CSS自己对元素进行规则:

#myvideo:-webkit-full-screen {width:100%; 身高:100%; }

另一方面,如果你试图模仿WebKit在Gecko上的行为,你需要将你想要呈现的元素放在另一个元素中,你将全屏翻译,并使用CSS规则调整内部元素以匹配你想要的外表.

我能够使用Chrome的开发人员工具将建议的CSS添加到您在评论中链接的松鼠图片中,并显示正确的大小.然而,它周围确实有一个白色的盒子(似乎来自图形元素).

我会尝试更改你的javascript,因为@AdamFischer建议使图像本身全屏而不是图形标记,并添加适当的CSS.如果这不是一个选项,您可以将css应用于figure元素,然后根据需要进行调整以获得所需的外观.(请注意,它是特定于webkit的css,所以它不应该干扰其他浏览器.)我也有一些成功将图形包装在另一个元素(如span或div)中,并将全屏css应用于此并width:30%从图中删除.

Answer 2

事件后选定的元素onclick不是图像，而是图形标签。

只需将您的 JavaScript 代码更新为：

$('img').on('click', function(e) {
    e.preventDefault;

    var elem = this;
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    } else {
        alert("Sorry, your browser is too old and doesn't support fullscreen :-(")
    }
});

http://fiddle.jshell.net/xnyj9wr5/2。

（全屏模式在框架内不起作用，所以这里是结果的链接http://fiddle.jshell.net/xnyj9wr5/2/show/）

请注意，requestFullscreen()不推荐使用不安全的来源，并且将来将删除支持。您应该考虑将应用程序切换到安全来源，例如 HTTPS。有关更多详细信息，请参阅https://goo.gl/rStTGz 。

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

编辑：在您的示例网站上，http://blogs.sitepointstatic.com/examples/tech/full-screen/index2.html

max-width: 100%;

是问题所在。删除此规则，然后根据需要调整图像大小。如果需要，您应该尝试在点击事件触发后用js删除此规则。或者将其绑定到requestfullscreen事件。