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/（不工作 - 再次，see SitePoint example）

问题

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

Chrome导致了这个问题：图片只是在黑色背景上居中，并保持其当前尺寸。

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

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

Answer 1

您的figure元素的样式为width: 30%。这导致了Chrome中的问题。

根据MDN根据“演示差异”部分：

值得注意的是Gecko和WebKit之间的关键区别   此时的实现：Gecko会自动添加CSS规则   拉伸它以填充屏幕的元素：“宽度：100％;高度：   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应用于此并删除{{1从图中。

Answer 2

主要div给出样式

#maindiv:-webkit-full-screen {   min-width: 100%;   min-height: 100%; }

通过将min-width和height属性更改为width和height来为image tag.try指定相同的样式。

Answer 3

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事件。

Answer 4

我认为它与默认的用户代理样式有关。只有在全屏模式下才能使图像居中。试试这个css：

.fullscreenOnClick:-webkit-full-screen img {
    display: block;
    margin: 0 auto;
}

Chrome中的requestFullscreen：图片仍然很小

HTML

JS

问题

4 个答案: