WordPress のアイキャッチやサムネイルの画像の微調整がしたい
アイキャッチやサムネに画像を設定して実際に確認するとイメージと違う表示のされ方がされている事ありますよね。
例えば、
- 人物の顔が切れている
- 人物の顔は映したくない
- 人物が左右どちらかに寄りすぎ
- 風景の注目してほしいポイントが切れている
そんな時は CSS の object-position を使いましょう。
実際に↓の object-position ありとなしを見比べてみてください。
See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.
1枚目の画像はデフォルト、画像の真ん中に焦点があっている状態です。
2枚目の画像は x軸(左右)に 100%ずらす設定をしています。
画像の右端を基準に表示されています。
逆に左端に寄せたい場合は – (マイナス)を使用します。
object-position: ( y軸 x軸 ); で値を入れると画像の焦点を微調整できます。
数値でなく top center left right bottom を使用することも可能です。
