LoginSignup
4

More than 5 years have passed since last update.

posted at

updated at

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

TL;DR

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

やりたかったこと

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

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

やったこと

画像を入れるdivwidth200%にして、マイナスのマージンを使って左右均等に画面外へ飛ばした。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で変な挙動を示す。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4