requestFullscreenで画像をフルスクリーン表示する – JavaScript

JavaScriptのrequestFullscreenを使うと、簡単に画像をフルスクリーンで表示することができます。

JS

function openImageByFullScreen(e) {
  if (e.requestFullscreen) {
    e.requestFullscreen();
  } else if (e.mozRequestFullScreen) { /* Firefox */
    e.mozRequestFullScreen();
  } else if (e.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    e.webkitRequestFullscreen();
  } else if (e.msRequestFullscreen) { /* IE/Edge */
    e.msRequestFullscreen();
  }
}
HTML

<img src="test.jpg" alt="" onClick="openImageByFullScreen(this)">

画像をクリックすると、フルスクリーンで表示します。

参考

https://www.w3schools.com/jsref/met_element_requestfullscreen.asp

Related Posts