I have an image on a web page. When I click on it, it should display full screen.
I have the following code:
<!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>
Problem I am facing - In full screen mode:
- The image displays in small size (i.e same as the size on browser page), not its original size - on all browsers.
- In IE - The image is not centered, it shows up on left side of the full screen (why not centered?). In Chrome - it is centered - as desired.