7

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:

  1. The image displays in small size (i.e same as the size on browser page), not its original size - on all browsers.
  2. 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.
5
  • which api you are using?
    – Vaisakh Pc
    Jun 2, 2014 at 12:00
  • vaisakh> The entire html/javascript is pasted in the question. please check.
    – Jasper
    Jun 2, 2014 at 12:01
  • Can you provide width also as auto
    – Vaisakh Pc
    Jun 2, 2014 at 12:06
  • The image elements is not scaled when going to full screen mode. That's why it shows the same size.
    – bahti
    Jun 2, 2014 at 12:06
  • Visakh> On the main web-page i want image to be of certain size (and it shows correctly as per that). But in full screen, it needs to show in its 'original size'
    – Jasper
    Jun 2, 2014 at 12:09

1 Answer 1

8

So, found the solution after some trial...

The solution is in the style section:
- width, height, margin are set to 'auto',
- but also marked as '!important' - this allows you to override the inline styling of the image on the webpage - when in fullscreen mode.

<!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>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.