画像を任意の位置でトリミングする方法
【本日実装したいこと】
画像を任意の位置でトリミングしたい
その実装方法は
object-fit: cover;を追加するだけ！
.example {
width: 250px;
height: 250px;
object-fit: cover; /* この一行を追加するだけ！ */
}
画像のサイズは
縦横のうち小さい方を基準にして
自動的に拡大・縮小され、
ボックスからはみ出した部分はトリミングされる
という魔法のようなcssです！
中央以外の位置でトリミングしたい時は
object-position プロパティーを設定します。
左上を基準にして、object-position: 横の位置 縦の位置; を記述すればOK。
以上で実装完了です。
※ただし、残念ながらこの便利な object-fit、object-position プロパティーはI
EとEdgeに対応していません。
IEとEdgeに対応するにはこちらのサイトを参考にしてみてください！
今日もお疲れ様でした。