CSSだけで実現！画像をトリミングする方法はobject-fitが便利

2021.04.02

object-fitプロパティを用いた方法

簡単なのはCSSのobject-fitプロパティを使った方法です。object-fitは「決めた枠の中に画像をどうはめこむか」を設定するものです。

画像を中央でトリミングする

例えば、338x600pxの下記サンプル画像を高さ240pxのサイズでトリミングしたいとします。

記述例

HTML

<div class="block">
  <img class="block__element" src="img/trim_sample.jpg" alt="">
</div>

CSS

.block__element {
    width: 100%;
    max-width: 338px;
    height: 240px;
    object-fit: cover;
}

ブラウザ表示

画像を中央でトリミングできました。

object-fitの値をcoverにすると「画像のアスペクト比を維持したまま、枠の中を埋めるように拡大縮小する」と指定できます。

object-fitに設定できる値

fill要素のボックス全体を埋める。ボックスに合わせるようにオブジェクトは引き伸ばされる。
contain要素のボックスに収まるように、アスペクト比を維持したまま拡大縮小される。
coverアスペクト比を維持したまま、要素のボックス全体を埋めるように拡大縮小される。
アスペクト比が合わない場合はオブジェクトが切り取られる。
noneコンテンツは拡大縮小されない。
scale-downcontain と none のうち、オブジェクトの実際のサイズが小さい方に合わされる。

画像を好きな位置でトリミングする

先程の記述だけだと画像の中央でトリミングされますが、中央以外でトリミングしたいこともあります。その場合はobject-positionプロパティを追加します。

記述例

CSS

.block__element {
    width: 100%;
    max-width: 338px;
    height: 240px;
    object-fit: cover;
    object-position: 0 100%;
}

ブラウザ表示

左から0, 上から100%の位置を指定したことで画像を左下でトリミングできました。

ちなみにobject-fitプロパティはIE非対応です。

overflowとpositionプロパティを用いた方法

最近では対応が少なくなってきたかもしれませんが、CSSのoverflowとpositionプロパティを使った方法ならIEでも実現できます。

画像を中央でトリミングする(IE対応)

記述例

HTMLは先程と同じです。

<div class="block">
  <img class="block__element" src="img/trim_sample.jpg" alt="">
</div>

CSS

.block {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 338px;
    height: 240px;
}
.block__element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    min-width: 338px;
}

imgタグを括っているdivにもスタイルを追加します。これでIEでも画像を中央でトリミングできます。

imgタグに指定したpositionとtransformを使って天地左右中央揃えにし、ボックスからはみ出した部分をoverflow: hidden;で隠します。

可変した時に画像の縮小が起きないようにimgタグにmin-width: 338px;を付けていますが、最小幅を考えた任意の数値でいいかと思います。

画像を好きな位置でトリミングする(IE対応)

例えば、画像を左下でトリミングします。

記述例

HTMLは先程と同じです。

<div class="block">
  <img class="block__element" src="img/trim_sample.jpg" alt="">
</div>

CSS

.block {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 338px;
    height: 240px;
}
.block__element {
    width: 100%;
    min-width: 338px;
    position: absolute;
    left: 0;
    bottom: 0;
}

左から0, 下から0の位置を指定すれば画像を左下でトリミングできます。

まとめ

この記事はCSSのみで実現する方法を紹介しましたが、他にもポリフィル(古いブラウザで非対応の機能を使えるようにするためのコード)を使った方法など色々あります。

対応ブラウザや運用方法によって作業に適したものを用いるのがいいかと思います！