CSS3 object-fit
概要は下記のページを参考。
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
http://www.webcreatorbox.com/tech/object-fit/
実装したいこと
枠内に画像をうまく納める。
切り抜き位置を中央にしておきつつ、アニメーションで見える範囲を移動させる。
前提
- 画像の縦横幅がバラバラ
- 縦横の比率もバラバラで、横長も縦長も混在
- スマホ前提でレイアウトは１つ
レイヤー
- div
- img
CSS
div
width: 60%;
max-height: 110px;
overflow: hidden;
img
width: 60%;
max-height: 110px;
object-fit:cover;
ポイント
object-fit を指定した img に、幅・高さも指定しないと object-fit:cover が効かない。
div のサイズは外枠レイアウト用の幅高さ指定、img は画像の切り抜きサイズ、という考え方かな。
確認
画像が切れていても、 img にサイズ指定がない場合は、 div の overflow で見切れているだけの場合がある。
その場合は object-position が効かないので切り抜き位置が変えられない。
object-position が効いて、切り抜き位置を変えられるようならOK。
ex.
img
width: 60%;
max-height: 110px;
object-fit:cover;
object-position: 0% 0% ;
アニメーション
position を @keyframes に書いて、 img の animation で指定する。
前提
- スマホWeb