全屏显示图像 - 使用 JavaScript/HTML5
Posted
技术标签:
【中文标题】全屏显示图像 - 使用 JavaScript/HTML5【英文标题】：Showing Image in full screen - using JavaScript/HTML5 【发布时间】：2014-07-22 12:59:06 【问题描述】：我在网页上有一张图片。当我点击它时，它应该显示全屏。
我有以下代码：
<!doctype html>
<html>
<head>
<script>
function makeFullScreen()
var divObj = document.getElementById("theImage");
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen)
divObj.requestFullscreen();
else if (divObj.msRequestFullscreen)
divObj.msRequestFullscreen();
else if (divObj.mozRequestFullScreen)
divObj.mozRequestFullScreen();
else if (divObj.webkitRequestFullscreen)
divObj.webkitRequestFullscreen();
else
console.log("Fullscreen API is not supported");
</script>
</head>
<body>
Click Image to display Full Screen...</br>
<img id="theImage" style="width:400px; height:auto;" src="pic1.jpg" onClick="makeFullScreen()"></img>
</body>
</html>
我面临的问题 - 在全屏模式下：
-
图像以小尺寸显示（即与浏览器页面上的尺寸相同），而不是其原始尺寸 - 在所有浏览器上。
在 IE 中 - 图像不居中，它显示在全屏的左侧（为什么不居中？）。在 Chrome 中 - 它是居中的 - 根据需要。
【问题讨论】：
你用的是哪个api？ vaisakh> 整个 html/javascript 都粘贴在问题中。请检查。 你能提供宽度也为自动 进入全屏模式时，图像元素不缩放。这就是它显示相同大小的原因。 Visakh> 在主网页上，我希望图像具有一定的大小（并且按照该大小正确显示）。但在全屏时，它需要以“原始大小”显示 【参考方案1】：所以，经过一番尝试，找到了解决方案……
解决方案在样式部分： - 宽度、高度、边距设置为“自动”， - 但也标记为 '!important' - 这允许您在全屏模式下覆盖网页上图像的内联样式。
<!doctype html>
<html>
<head>
<style>
.fullscreen:-webkit-full-screen
width: auto !important;
height: auto !important;
margin:auto !important;
.fullscreen:-moz-full-screen
width: auto !important;
height: auto !important;
margin:auto !important;
.fullscreen:-ms-fullscreen
width: auto !important;
height: auto !important;
margin:auto !important;
</style>
<script>
function makeFullScreen()
var divObj = document.getElementById("theImage");
//Use the specification method before using prefixed versions
if (divObj.requestFullscreen)
divObj.requestFullscreen();
else if (divObj.msRequestFullscreen)
divObj.msRequestFullscreen();
else if (divObj.mozRequestFullScreen)
divObj.mozRequestFullScreen();
else if (divObj.webkitRequestFullscreen)
divObj.webkitRequestFullscreen();
else
console.log("Fullscreen API is not supported");
</script>
</head>
<body>
Hello Image...</br>
<img id="theImage" style="width:400px; height:auto;" class="fullscreen" src="pic1.jpg" onClick="makeFullScreen()"></img>
</body>
</html>
【讨论】：
以上是关于全屏显示图像 - 使用 JavaScript/HTML5的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 reactJS 和 css 在全屏背景中显示图像？