CSSを使った画像のトリミングする方法
画像の一覧を表示したいときなど、すべての画像が同じサイズだといいですが違う場合があったり、デバイスによってサイズを変更したいときってありますよね。そんなときに便利なCSSがあります。
CSSを使って画像のトリミングができるobject-fit
プロパティの使い方についてまとめました。
画像を中央でトリミングする方法
このような横長の画像を200pxの正方形でトリミングしたいときは以下のように指定します。
img {
width: 200px;
height: 200px;
object-fit: cover;
}
See the Pen Untitled by Tadafumi Ito (@suzuran_code) on CodePen.
このようにobject-fit
プロパティを使うと元の画像の縦横比は変えずに、縦横の大きさの小さい方法を基準にして自動的に拡大・縮小して、はみ出した部分をトリミングしてくれます。
画像を任意の位置でトリミングする方法
中央でトリミングするのではなく、任意の場所でトリミングしたいときはobject-position
プロパティ を指定します。
左上でトリミングをしたい場合は以下のように指定します。
img {
width: 200px;
height: 200px;
object-fit: cover;
object-position: left top;
}
See the Pen 20211122_02 by Tadafumi Ito (@suzuran_code) on CodePen.
右下でトリミングをしたい場合は以下のように指定します。
img {
width: 200px;
height: 200px;
object-fit: cover;
object-position: right bottom;
}
See the Pen Untitled by Tadafumi Ito (@suzuran_code) on CodePen.
このようにobject-position
プロパティは左上を起点に横の位置と縦の位置を指定します。上記のような指定の仕方ではなくパーセントやピクセルを指定することもできます。