logo标签列表

JavaScript/HTML5展示全屏图像

javascripthtmlinternet-explorergoogle-chrome
7

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

我有以下代码：

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

我面临的问题 - 全屏模式下:

  1. 所有浏览器都显示图像的小尺寸（即与浏览器页面上的大小相同），而不是其原始尺寸。
  2. 在IE中 - 图像未居中，出现在全屏幕的左侧（为什么没有居中？）。在Chrome中 - 它被居中显示 - 如预期。
你在使用哪个 API？ - Vaisakh Pc
整个HTML/JavaScript代码已经粘贴在问题中，请检查。 - Jasper
你能否同时提供宽度和自动调整吗？ - Vaisakh Pc
当进入全屏模式时，图像元素不会缩放。这就是为什么它显示相同大小的原因。 - bahti
Visakh>在主网页上，我希望图片的大小是固定的（并且按照该大小正确显示）。但是在全屏模式下，它需要以它的“原始尺寸”显示。 - Jasper
1个回答
8

经过一些尝试，我找到了解决方案...

解决方案在样式部分中：
- 宽度、高度、边距都设置为“auto”，
- 但也标记为“!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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接