Javascript 请求Chrome全屏显示：图像仍然很小

我下面要实现全屏点击我的网站的一些图片

我的代码与非常相似，但以下是我的代码：

HTML

JS

$（'.fullscreenOnClick'）。在（'click'，函数（e）上{
e、 防止违约；
var elem=这个；
if（元素请求全屏）{
元素请求全屏（）；
}else if（elem.msRequestFullscreen）{
elem.msRequestFullscreen（）；
}else if（元素mozRequestFullScreen）{
elem.mozRequestFullScreen（）；
}else if（元素webkitRequestFullscreen）{
elem.webkitRequestFullscreen（）；
}否则{
警报（“对不起，您的浏览器太旧，不支持全屏：-（”）
}
});

（不工作-再次）

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

Chrome造成了这个问题：图像只是集中在黑色背景上，保持其当前大小

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

---

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

onclick事件后选择的元素不是图像，而是数字标签

只需将javascript代码更新为：

$（'img'）。在（'click'，函数（e）{
e、 防止违约；
var elem=这个；
if（元素请求全屏）{
元素请求全屏（）；
}else if（elem.msRequestFullscreen）{
elem.msRequestFullscreen（）；
}else if（元素mozRequestFullScreen）{
elem.mozRequestFullScreen（）；
}else if（元素webkitRequestFullscreen）{
elem.webkitRequestFullscreen（）；
}否则{
警报（“对不起，您的浏览器太旧，不支持全屏：-（”）
}
});

（全屏模式在画面内不起作用，所以这里是结果链接）

请注意<代码> RealSuffScript（）/代码>在不安全的来源上被弃用，并且支持将在将来被移除。您应该考虑将应用程序切换到安全的来源，如HTTPS。请参阅更多细节。

编辑： 在您的示例网站上

最大宽度：100%；

---

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

requestfullscreen

事件。

我认为它与默认的用户代理样式有关。您只能在全屏时将图像居中。尝试此css：

.fullscreenOnClick:-webkit全屏img{
显示：块；
保证金：0自动；
}

您的figure元素的样式为

宽度：30%

。这导致了Chrome的问题

根据“呈现差异”一节：

值得注意的是Gecko和WebKit之间的一个关键区别 此时的实现：Gecko自动将CSS规则添加到 要拉伸它以填充屏幕的元素：“宽度：100%；高度： WebKit不这样做，而是将全屏居中 屏幕中相同大小的元素，否则为黑色 与WebKit中的全屏行为相同，您需要添加自己的 “宽度：100%；高度：100%；”CSS对元素本身的规则：

#myvideo:-webkit全屏{宽度：100%；高度：100%；}

另一方面，如果您试图模仿WebKit在上的行为 Gecko，你需要把你想展示的元素放进去 另一个元素，您将改为全屏显示，并使用CSS 调整内部元素以匹配所需外观的规则

我能够使用Chrome的开发者工具将建议的css添加到您在评论中链接的squirrel图片中，它显示了正确的大小。但是，它确实有一个白色框（似乎来自figure元素）

---

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

宽度：30%

。

对于主div，请给出样式

#maindiv:-webkit全屏{最小宽度：100%；最小高度：100%；}

---

为图像标签提供相同的样式。尝试将“最小宽度”和“高度”属性更改为“宽度”和“高度”。

您一直提到图像大小，但我看不到您更改图像大小。使用图像宽度为

width=100

的firefox和chrome进行测试时，都会全屏显示该大小的图像。firefox没有在其原始图像中显示图像l我的尺寸。作为旁注，提琴不能工作的原因是提琴iframe没有设置

allowfullscreen

。请检查此页面并用Firefox和Chrome点击松鼠。你能看到图像全屏后的尺寸差异吗？我点击Squire时没有看到任何尺寸差异画面居中，其余部分变黑，但松鼠的照片大小保持不变。