0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSSだけで画像をトリミングする方法

Posted at

画像を一覧で表示する際、画像によってサイズが異なる場合に統一して見やすくする方法。

#画像を中央の位置でトリミング

.image { 
object-fit: cover;
}

を追加することで中央できれいにトリミング可能。

#画像を任意の位置でトリミングする

中央以外の位置でトリミングしたい時は object-position プロパティーを設定。
左上を基準にして、object-position: 横の位置と縦の位置を記述する

#トリミングせずに余白を表示する
object-fit: cover; を指定していたところを object-fit: contain; に変更するのみ。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?