みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

TwitterCards(ツイッターカード)では、ランドスケープ(横長)とポートレート(縦長)でsummary_large_imageのトリミングの位置が変わってくる

【結論】

横長画像(正方形含む)は、

background-position: center center;
background-size: cover;

的な感じでトリミングされ、

縦長画像は、

background-position: center top;
background-size: cover;

的な感じでトリミングされる。



【考察】

なんでだろう?と考えたところ、
縦長の4コマ漫画とかを投稿した時はセンター基準ではなく、上基準になっている方が良いからかもしれないと思いました。
それが理由かはわかりませんが。



【実験内容】

kimizuka.hatenablog.com

先日いろんな大きさの画像をアップしまくって検証しました が、切り取りの法則を見出すべく、更に何枚かアップしてみました。

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;

になりました。
どうやら横幅よりも縦幅の方が長いとトリミングの中心点が変更になるようです。