ブラウザでスライドショーを実装する際、
画面の横長・縦長と、画像の横長・縦長を合わせると、
より画面に隙間なく画像全体を表示することができます。
その方法を以下に示します。
ポイントは、倒すとき、画像要素の width にビューポートの高さ100vhを、height に幅100vwを指定することです。
sample.css
*{
margin:0;
padding:0;
box-sizing:border-box;/* スクロールバーが表示されてしまわないように */
}
body {
min-height:100vh;/* bodyの高さに画面高さ100vhを指定 */
}
#myImg{ /* 規定は北に向ける */
position:absolute;
top:0;
left:0;
object-fit:contain; /* 要素いっぱいに画像を合わせる指定 */
width:100vw; /* 画像幅指定に画面幅100vwを指定 */
height:100vh; /* 画像高さ指定に画面高さ100vhを指定 */
}
#myImg.rotate2east{
width:100vh; /* 画像幅指定に画面高さ100vhを指定 */
height:100vw; /* 画像高さ指定に画面幅100vwを指定 */
transform-origin:top left;
transform:rotate(90deg) translateY(-100%); /* 東に向け、位置を画面に合わす */
}
#myImg.rotate2west{
width:100vh;
height:100vw;
transform-origin:top left;
transform:rotate(-90deg) translateX(-100%); /* 西に向け、位置を画面に合わす */
}
sample.js
//const myImg = document.getElementById('myImg');
// myImg.src = '...'; // JSブロックのどこかで画像を変更する
// 新たな画像が読み終わるとイベントが呼び出される
myImg.addEventListener('load', ()=>{
// 画面横長==画像横長
const r = (window.innerHeight < window.innerWidth) === (myImg.naturalHeight < myImg.naturalWidth) ?
'N' : 'E'; // 東西と北の切り替えは要件に合わせて調整してください。
// 画像領域を倒す・戻す
myImg.toggleClass('rotate2east', r==='E');
myImg.toggleClass('rotate2west', r==='W');
});
sample.html
<body><img id='myImg' /></body>