javascript - 在 Chrome 中请求全屏 : image remains small

Question

我正在关注 this great tutorial from SitePoint在我网站的一些图片上实现点击时全屏显示。

我的代码与the example provided by 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/ (不工作 - 再次，see SitePoint example)

问题

我的问题是 Firefox 和 IE 按我的预期显示全屏图像:图像以其原始大小显示，居中。

Chrome 导致了这个问题:图像只是在黑色背景上居中，并保持其当前大小。

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

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

Answer 1

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

根据 MDN在“演示文稿差异”部分下:

It's worth noting a key difference here between the Gecko and WebKit implementations at this time: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "width: 100%; height: 100%". WebKit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black. To get the same fullscreen behavior in WebKit, you need to add your own "width: 100%; height: 100%;" CSS rules to the element yourself:

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

On the other hand, if you're trying to emulate WebKit's behavior on Gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use CSS rules to adjust the inner element to match the appearance you want.

我能够使用 Chrome 的开发人员工具将建议的 css 添加到您在评论中链接的松鼠图片，并且它显示了正确的大小。但是，它周围确实有一个白色框(似乎来自图形元素)。

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