今回は、CSSのプロパティ object-position について。
object-fit: cover で画像をトリミングした際に、トリミングする位置を画像中央から任意の位置に変更するためのプロパティです。
今までは画像中央の切り抜きで問題なかったのですが、今回は画像の下の方を切り抜きたかったので、使ってみました。
が、img タグにプロパティを追加したのに、反映されず…！
なので、調べてみたところ、下記の記事がヒットしました。
CSS だけで画像の切り抜きをうまくやる – Qiita
https://qiita.com/tmorikawam/items/9947a22e9a5e1183502d
なんでも、object-fit を指定した img に、幅か高さが指定されていないと object-fit:cover が効かないのだそうです。
その場合は、object-fit ではなく、div の overflow で見切れているだけの場合があるようで、そうすると切り抜き位置を変更できないとのこと。
そのため、object-fit を追加したい img タグには、高さもしくは幅を指定すればOKです。
色々いじって追加してしまったので、一旦 CSS を元に戻してから、下記のように img タグに幅・高さを指定したところ、ようやく切り抜き位置を変更できました。
img {
width: 100%;
height: calc(100vh - 30px);
object-fit: cover;
object-position: 50% 100%;
}
なお、上記のコードでは、左右中央で下部分を切り抜いています。
表示したい画像の下の方にメッセージがあったので、下部分が欠けるのはNGだったので、このようにしました。
以上、object-fit と object-position で画像を切り抜いた際、切り抜き位置を変更する方法でした。
意外と見落とすかもしれないので、お気を付けください。
