今回は、CSS で画像を任意の位置でトリミングする方法についてです。
普段は画像の中央をトリミングするだけだったので、位置の調整などは要らなかったのですが、今回は画像のやや上の方を切り取りたかったので使用するプロパティを追加しました。
参考にさせていただいた記事はこちらから。
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス
https://www.webcreatorbox.com/tech/object-fit
以前投稿した object-fit プロパティの使い方についての記事でも紹介した記事ですが、本当にわかりやすいのでお勧めです！
実装方法ですが、object-position プロパティを使います。
サンプルコードは下記のとおりです。
1 2 3 | <div> <img src='[表示したい画像のパス]' /></div> |
1 2 3 4 5 6 7 8 9 10 | div { height: 200px; width: 200px; img { height: 100%; width: 100%; object-fit: cover; object-position: 0% 35%; }} |
200px × 200px の div 要素内にある画像を object-fit プロパティを使ってトリミングし、object-position プロパティで切り抜く位置を指定しています。
上記では、画像のやや上部の方を切り抜くように指定しています。
なお、今回は切り抜く位置を % で指定していますが、px で指定することもできます。
切り抜きたい位置が明確に決まっている場合は、px で指定したほうがきれいに表示されると思います。
以上、CSS で画像の任意の位置をトリミングする方法についてでした。
ご参考になれば幸いです。
