【結論】
横長画像(正方形含む)は、
background-position: center center; background-size: cover;
的な感じでトリミングされ、
縦長画像は、
background-position: center top; background-size: cover;
的な感じでトリミングされる。
【考察】
なんでだろう?と考えたところ、
縦長の4コマ漫画とかを投稿した時はセンター基準ではなく、上基準になっている方が良いからかもしれないと思いました。
それが理由かはわかりませんが。
【実験内容】
先日いろんな大きさの画像をアップしまくって検証しました が、切り取りの法則を見出すべく、更に何枚かアップしてみました。
https://twitter.com/ki_230/status/771512550450040832
https://twitter.com/ki_230/status/771512919448100864
まず、前回が白の縁取りだったので若干わかりにくかったのですが、こちらの2枚の画像を見るに、短辺合わせでトリミングしている事がわかります。
CSSでいうところの background-size: cover ですね。
なので、CSSですべてを表現すると、
background-position: center center; background-size: cover;
ということになると思ったんですが、
前回つかった画像がすべてランドスケープ(1枚だけ正方形)の画像だった事に気づきました。
そこで、ポートレートの画像をアップしてみると...
400 * 401
https://twitter.com/ki_230/status/771518485830565888
!
background-position: center top; background-size: cover;
になりました。
どうやら横幅よりも縦幅の方が長いとトリミングの中心点が変更になるようです。