画像をコードでトリミングするobject-fit【HTML/CSS】

フリー素材サイトなどでダウンロードした画像ですが、いざ使おうと思ったときにサイズが合わない場合もよくあります。

既存のパソコンの機能やPhotoshopでトリミングもできますが、サイズが確定していないときや、いろいろなアスペクト比に当てはめてみたい場合は「object-fit」というstyleを使うのがおすすめです。

object-fitの使い方

サンプルコード

HTML

<img src="img/kt-hakucyo_00.jpg" alt="お堀の白鳥" class="img-thumbnail">

CSS

.img-thumbnail {
  width: 500px;
  height: 300px;
  object-fit: cover;
}

横幅、高さの指定

まずは使いたい画像を用意し、CSSで横幅と高さを設定したい値に指定します。

元の画像

.img-thumbnail {
  width: 500px;
  height: 300px;
}

横幅500px、高さ300pxを指定した画像

これだけだと画像が歪んでしますので、object-fitを設定します。

object-fitの設定

.img-thumbnail {
  width: 500px;
  height: 300px;
  object-fit: cover;
}

上記のように「object-fit: cover;」を追加すると

「object-fit: cover;」を設定後の画像

画像の横幅は目一杯表示され、上下がトリミングされた画像を表示することができます。

オリジナルの画像より、横幅が短く高さを長く設定した場合は、高さが目一杯表示され左右がトリミングされます。

object-positionの設定

.img-thumbnail {
  width: 500px;
  height: 300px;
  object-fit: cover;
  object-position: top;
}

表示させたい部分が画像の上の方の場合は「object-position:」に「top;」や「0 0;」を指定します。

逆に下の方を表示させたい場合は「bottom;」や「100% 100%;」を指定します。

左右が見切れている場合は「left;」や「right;」を指定できます。

その他のHTML/CSSに関する記事はこちらから

HTML/CSSマガジン｜ピヨ彦｜note