我在网页上放置了一张图片,当我点击它时,它应该能全屏显示。
我有以下代码:
<!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中 - 它被居中显示 - 如预期。