【CSS】CSSのみで画像を簡単にトリミングできる「object-fit」プロパティが便利

村上 著者:村上

【CSS】CSSのみで画像を簡単にトリミングできる「object-fit」プロパティが便利

画像を扱う際に、任意の大きさでトリミングしたい場合があるかと思います。
その時に便利なプロパティが「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 とかいろいろ使わなくて済むので、コードもすっきりしておすすめです。
画像トリミングしたいときは、是非こちらを使いましょう。

  • この記事いいね! (0)

著者について

村上

村上 administrator