読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

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

【結論】

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

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

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

縦長画像は、

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

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



【考察】

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



【実験内容】

kimizuka.hatenablog.com

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


まず、前回が白の縁取りだったので若干わかりにくかったのですが、こちらの2枚の画像を見るに、短辺合わせでトリミングしている事がわかります。
CSSでいうところの background-size: cover ですね。

なので、CSSですべてを表現すると、

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

ということになると思ったんですが、
前回つかった画像がすべてランドスケープ(1枚だけ正方形)の画像だった事に気づきました。

そこで、ポートレートの画像をアップしてみると...

300 * 400


200 * 800


400 * 401



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

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