全屏显示图像 - 使用 JavaScript/HTML5答案

【问题标题】：Showing Image in full screen - using JavaScript/HTML5全屏显示图像 - 使用 JavaScript/HTML5
【发布时间】：2014-07-22 12:59:06
【问题描述】：

我在网页上有一张图片。当我点击它时，它应该显示全屏。

我有以下代码：

<!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 中 - 它是居中的 - 根据需要。

【问题讨论】：

你用的是哪个api？
vaisakh> 整个 html/javascript 都粘贴在问题中。请检查。
你能提供宽度也为自动
进入全屏模式时，图像元素不缩放。这就是它显示相同大小的原因。
Visakh> 在主网页上，我希望图像具有一定的大小（并且按照该大小正确显示）。但在全屏时，它需要以“原始大小”显示

标签： javascript html internet-explorer google-chrome

【解决方案1】：

所以，经过一番尝试，找到了解决方案……

解决方案在样式部分：
- 宽度、高度、边距设置为“自动”，
- 但也标记为 '!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>

【讨论】：