![見出し画像](https://assets.st-note.com/production/uploads/images/84436992/rectangle_large_type_2_cf57453d29e320fae6d06a752044308b.png?width=1200)
画像をコードでトリミングする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で横幅と高さを設定したい値に指定します。
![](https://assets.st-note.com/img/1660128431332-fKDoc0nb83.png?width=1200)
.img-thumbnail {
width: 500px;
height: 300px;
}
![](https://assets.st-note.com/img/1660128171569-B6aDaJ5SSR.png?width=1200)
これだけだと画像が歪んでしますので、object-fitを設定します。
object-fitの設定
.img-thumbnail {
width: 500px;
height: 300px;
object-fit: cover;
}
上記のように「object-fit: cover;」を追加すると
![](https://assets.st-note.com/img/1660128387640-GCe5NYmcgf.png?width=1200)
画像の横幅は目一杯表示され、上下がトリミングされた画像を表示することができます。
オリジナルの画像より、横幅が短く高さを長く設定した場合は、高さが目一杯表示され左右がトリミングされます。
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に関する記事はこちらから
この記事が気に入ったらサポートをしてみませんか?