我在网页上有一张图片。当我点击它时，它应该全屏显示。
我有以下代码:
<!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 中 - 它居中 - 根据需要。
最佳答案
所以，经过一番尝试，找到了解决办法……
解决方案在样式部分:
- 宽度、高度、边距设置为“自动”，
- 但也标记为“!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 - 全屏显示图像 - 使用 JavaScript/HTML5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23994027/