title: Showing Image in full screen - using JavaScript/HTML5
body: <p>I have an image on a web page. When I click on it, it should display full screen.</p>
  <p>I have the following code:</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;      
       &lt;script&gt;
          function makeFullScreen() {
           var divObj = document.getElementById(&quot;theImage&quot;);
         //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(&quot;Fullscreen API is not supported&quot;);
        } 
  
      }
       &lt;/script&gt;
      
    &lt;/head&gt;
    &lt;body&gt;
      Click Image to display Full Screen...&lt;/br&gt;
      
      &lt;img id=&quot;theImage&quot; style=&quot;width:400px; height:auto;&quot; src=&quot;pic1.jpg&quot; onClick=&quot;makeFullScreen()&quot;&gt;&lt;/img&gt;
      
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>Problem I am facing - In full screen mode</strong>:<br></p>
  <ol>
  <li>The image displays in small size (i.e same as the size on browser page), not its original size - on all browsers. <br></li>
  <li>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.</li>
  </ol>