document.querySelector('img').requestFullScreen()とかすると画像が全画面表示されるやつ。画面ロード直後にいきなり全画面表示とかはできないようになってるのでclickイベント内とかで行う。
詳しくは以下
画像ギャラリー的なUIでの利用を想定してみる。画像をクリックしたら最大化表示されるやつ。
<style>
img{
width: 300px;
height: 233px;
border: solid 4px #aaa;
border-radius: 16px;
}
img:hover{
border-color: #00aaff;
cursor: pointer;
}
</style>
</head>
<body>
<h1>FullScreen Demo for Chrome/Safari</h1>
<img src="https://lh5.googleusercontent.com/-7cggVHG-i74/U5M05ee0DAI/AAAAAAAAHWA/iM3hb0gONVc/s800/IMG_1727.png"/>
<img src="https://lh4.googleusercontent.com/-E-GSa8wymBs/U5MzX0_5G7I/AAAAAAAAHVM/S2igEXSg8nU/s800/IMG_1778.png"/>
<script>
var images = document.querySelectorAll('img');
Array.prototype.forEach.call(images, function (image, index, nodeList) {
image.addEventListener('click', function(){
if(image.webkitRequestFullScreen) {
image.webkitRequestFullScreen();
}
});
});
最大化されない
Firefoxの場合、styleのサイズ指定が無視されでっかく表示されるけど、Chrome/Safariの場合は小さいままになってしまう。
Firefox
Chrome/Safari
MDNによると以下でFirefoxと同じ挙動になるとのこと。
img:-webkit-full-screen {
width: 100%;
height: 100%;
}
なんか長細くて変ｗ
FullScreen化された時だけ、サムネイル時のstyleを解除するといい感じに動くみたい。
<style>
.noFullScreen img{
width: 300px;
height: 233px;
border: solid 4px #aaa;
border-radius: 16px;
display: inline-block;
}
.noFullScreen img:hover{
border-color: #00aaff;
cursor: pointer;
}
</style>
<script>
document.addEventListener('webkitfullscreenchange', function(){
var image = document.webkitFullscreenElement;
if(image){
document.body.classList.remove('noFullScreen');
}
else{
document.body.classList.add('noFullScreen');
}
}, false);
</script>
Chromeの場合のみ最大化解除後、段積みになっちゃう
Chromeの場合のみ以下みたいになってしまう。バグかな。
これについてはinline-blockを指定すれば解決するっぽい。
.noFullScreen img{
width: 300px;
height: 233px;
border: solid 4px #aaa;
border-radius: 16px;
display: inline-block; /* 追加 */
}