javascript - 无法在全屏模态中使图像元素全屏

Question

我有一个模式，它采用浏览器的整个宽度和高度。在模式中，div 和一些其他元素中有一个图像，现在我试图使图像在浏览器中全屏显示，就像youtube 视频全屏显示，我添加了一个按钮并为此目的在其中实现了全屏 API，但它不起作用。

$('#myModal').on('shown.bs.modal', function() {
  $('#myInput').focus();
});

$('#dicomModal').on('shown.bs.modal', function() {
  $('#myInput').focus();
});

$(document).ready(function() {
  $(".js-example-basic-single").select2();
});

$(function() {
  $('#datetimepicker8').datetimepicker({

  });
});

$(function() {
  $('#datetimepicker1').datetimepicker({

  });
});


var myImage = document.getElementById('myImage');
var dicomFull = document.getElementById('dicomFull');

if (dicomFull) {
  dicomFull.addEventListener('click', function() {
    if (myImage.requestFullscreen) {
      myImage.requestFullscreen();
    } else if (myImage.webkitRequestFullscreen) {
      myImage.webkitRequestFullscreen();
    } else if (myImage.mozRequestFullScreen) {
      myImage.mozRequestFullScreen();
    } else if (myImage.msRequestFullscreen) {
      myImage.msRequestFullscreen();
    }

  });
}

.dicomv {
  &__mods {
    overflow: hidden !important;
  }
  &__items {
    display: inline-block;
    margin-right: 1rem;
  }
  &__navbar {
    width: 100%;
    border-radius: 0;
    min-height: 60px;
    margin: 0;
    top: 0;
    position: fixed;
    z-index: 80;
  }
  &__next {
    padding: 1rem;
    margin-top: 1rem;
    color: map-deep-get($colors, "background", "base");
    background-color: map-deep-get($colors, "background", "bg-col");
    &: hover {
      color: map-deep-get($colors, "background", "base");
      background-color: map-deep-get($colors, "background", "bg-col");
    }
    &:focus {
      color: map-deep-get($colors, "background", "base");
      background-color: map-deep-get($colors, "background", "bg-col");
    }
  }
  &__fs {
    padding: 1rem;
    margin-top: 1rem;
    color: map-deep-get($colors, "background", "base");
    background-color: map-deep-get($colors, "button", "btn-col");
    &: hover {
      color: map-deep-get($colors, "background", "base");
      background-color: map-deep-get($colors, "button", "btn-col");
    }
    &:focus {
      color: map-deep-get($colors, "background", "base");
      background-color: map-deep-get($colors, "button", "btn-col");
    }
  }
  &__container {
    position: relative;
    height: 100vh;
    margin: 0;
    float: left;
  }
  &__button {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
    margin-top: -3.5rem;
    color: map-deep-get($colors, "background", "base");
  }
  &__wid {
    width: 100% !important;
    margin-bottom: 0 !important;
    @media (min-width: 768px) {
      margin: 0 auto !important;
    }
  }
  &__mod {
    &--d {
      top: 0 !important;
      @media (min-width: 768px) {
        margin: 0 auto !important;
      }
    }
  }
}
#viewArea {
  margin-left: 0px;
  max-width: 100%;
  background: map-deep-get($colors, "font", "para")
}
.viewport {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute
}
.imageViewer {
  height: 100%;
}
.viewportWrapper {
  width: 100%;
  height: 100%;
  position: relative;
  color: white;
  display: inline-block;
  background-color: black;
}
.viewer {
  width: 100%;
  height: 100%;
}
.dicom-sidebar-container {
  width: 240px;
  height: 100vh;
  border-right: 1px solid #a1a1a1;
  float: left;
  overflow-y: auto;
}
.dicom-main-container-with-sidebar {
  width: calc(100% - 240px);
}
.dicom-main-container-without-sidebar {
  width: 100%;
}
//
.dicom-sidebar {
  /*margin: 0;*/
}
.panel-heading {
  padding: 2px 8px;
}
.panel-container {
  margin-left: 1rem;
  border: 1px solid #ccc;
}
.dicom-sidebar-panel {
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  overflow-y: auto;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.dicom-sidebar-panel-body {
  padding: 0 10px 100px 10px;
  overflow-y: auto;
}
.dicom-sidebar-row {
  margin-right: 0;
}
.dicom-sidebar-drawer {
  margin-left: -240px;
}
.dicom-sidebar-inner-box {
  width: 110px;
  padding-left: 3px;
  margin: 1rem 0;
  z-index: 100;
  float: left;
}
.dicom-sidebar-inner-box:nth-child(even) {
  padding-left: 6px;
}
:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
:-moz-full-screen {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="dialog" class="modal dicomv__mods" id="dicomModal" style="z-index: 1050; display:">
  <div class="modal-dialog modal-lg dicomv__wid">
    <div class="modal-content"></div>
    <div id="" class="dicomv">
      <div class="navbar navbar-default dicomv__navbar">
        <div class="dicom-navbar-container">

          <ul class="">

            <li class="dicomv__items">
              <a href="#">
                <button type="button" class="btn btn-default dicomv__fs" id="dicomFull" name="button">View FullScreen</button>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div id="viewArea" class="row">
        <div id="dicom_loadbar"></div>
        <div class="dicom-sidebar-container panel panel-default dicom-sidebar-panel">
          <div class="panel-heading">
          </div>
          <div class="panel-body dicom-sidebar-panel-body">

          </div>
        </div>

        <div class="dicomv__container dicom-main-container dicom-main-container-with-sidebar" id="myImage">

          <div id="myImage">
            <img src="http://images.newseveryday.com/data/thumbs/full/27419/570/0/0/0/macbook-pro.jpg" id="" alt="" />

          </div>

        </div>
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

您的图像需要有 100% 的宽度，以便在全屏显示时缩放以填充容器。所以这可能不是您的最终代码，但作为示例:

if(dicomFull){
dicomFull.addEventListener('click',function(){
  if(myImage.requestFullscreen){
    myImage.requestFullscreen();
  }else if (myImage.webkitRequestFullscreen) {
    myImage.webkitRequestFullscreen();
  }else if (myImage.mozRequestFullScreen) {
    myImage.mozRequestFullScreen();
  }else if (myImage.msRequestFullscreen) {
    myImage.msRequestFullscreen();
  }
  $("#myImage img").css("width", "100%");

});
}