画像を簡単にトリミング&レスポンシブできる object-fit プロパティ

フロントエンド
画像を簡単にトリミング&レスポンシブできる object-fit プロパティ

ぱくたそさんから借りました可愛い猫の画像を使っていきたいと思います。


こちらが今回お借りした画像です


画像のトリミング


この画像を幅700px 高さ250pxにトリミングしてみましょう。

See the Pen original by miki hayashida (@hmiki) on CodePen.

.....。 幅と高さを指定するだけだと上記のように画像が台無しに。 これにobject-fit プロパティを一文追加することで簡単にトリミングができます。

See the Pen object-fit: cover by miki hayashida (@hmiki) on CodePen.

追加したのは

object-fit: cover;

だけです。 object-fit プロパティは自身に指定された幅・高さにどう当てはめるかを指定できます。

object-fit プロパティの値一覧

fill指定サイズのコンテンツボックス全体を埋めるサイズになる(アスペクト比は維持しない)
containアスペクト比を維持しまま、指定サイズのコンテンツボックス内に画像をぴったり収める(余白がつく)
coverアスペクト比を維持したまま、指定サイズのコンテンツボックスを埋める(リサイズができる)
noneリサイズをせず、指定サイズのコンテンツボックス内を画像そのままのサイズで埋める
scale-downnone または contain を指定したかのようにサイズが決められ、実際のサイズが小さいほうが採用される

See the Pen all @ object-fit by miki hayashida (@hmiki) on CodePen.

レスポンシブに対応したリサイズ

先ほどは幅700px 高さ250pxにトリミングしましたが、幅を100%にすることで高さは固定したままレスポンシブに対応することができます。

See the Pen responsive object-fit by miki hayashida (@hmiki) on CodePen.

object-fitプロパティと合わせても使える
object-position プロパティ

object-position プロパティではボックス内にでの配置を指定できます。

左上を起点に数値が決まっています。 0% 0% では左上を基準に配置、100% 100% では右上を基準に配置します。

See the Pen object-position by miki hayashida (@hmiki) on CodePen.

対応状況について

IEとver15以下のEdgeで未対応のため実装するのはまだ早いかもしれない段階です。



これが使えるようになればとても便利ですね。 IE11とEdgeを対応しないのであれば全然使えますので、使ってみるのも手だと思います。 またはIEとEdgeに対応するためのプラグインがあるようですので、こちらを使えば全てのブラウザで対応できそうです。

ぜひお試しください。