CSSで画像を中央揃えにして、両脇にはみ出した部分を切り捨てる。

TL;DR

style.css

div{
    width: 200%;
    margin: 0 -50%;
    text-align: center;
}

やりたかったこと

下のリンクにしたものを作るとき、画像を縦方向に画面いっぱい表示して、横にはみ出した部分は切り捨てたかった。

http://circle9.work/mics/megami/megami.html （拙作: ふるよにメガミランダマイザ）

やったこと

画像を入れるdivのwidthを200%にして、マイナスのマージンを使って左右均等に画面外へ飛ばした。200%という数字は、100%より大きいこと以外に意味はないので、適宜もっと大きい値にしたり小さい値にしたりしてやってください。他にもやり方はあるだろうけど、難しいCSSプロパティを使わずに実装できる唯一の方法だと思います。

test.html

<!-- 一部のみ -->
<div>
    <img src="hoge.jpg">
</div>

style.css

body{
    overflow-x: hidden;
}
img{
    height: 100%;
}
div{
    height: 100vh;
    width: 200%;
    margin: 0 -50%;
    text-align: center;
}

##面倒なこと

なお、overflow系のプロパティは、iOSのSafariで変な挙動を示す。