画像を扱う際に、任意の大きさでトリミングしたい場合があるかと思います。
その時に便利なプロパティが「object-fit」です。
これを使えば、画像のトリミングがたった一行でできて、凄く便利！
なお、今回参考にしたサイトはこちら。
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
https://www.webcreatorbox.com/tech/object-fit
具体的な記述の仕方はこちら。
img {
width: 100px;
height: 100px;
// トリミング
object-fit: cover;
}
imgタグに対して、縦横100px、そして「object-fit: cover;」を指定しています。
こうすることにより、画像の縦横比を維持したまま、画像を100px × 100pxのサイズいっぱいに表示することができます。
また、object-position というプロパティを指定することで、表示する画像の位置を指定することもできます。
例えば下記のように指定した場合、
img {
width: 100px;
height: 100px;
// トリミング
object-fit: cover;
object-position: 100% 100%;
}
表示している画像が横長の場合は、右端の位置でトリミングしてくれます。
通常のトリミングでしたら、object-position を指定せず中央位置でトリミングで問題なさそうですが、どうしても画像の左側や上を見せたい！というときに使えますね。
ちなみに、object-position: [横の位置] [縦の位置]; という順番で指定します。
position とかいろいろ使わなくて済むので、コードもすっきりしておすすめです。
画像トリミングしたいときは、是非こちらを使いましょう。
