17
19

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 5 years have passed since last update.

サムネのクロップ目的で background-image を使うのは止めて object-fit にしよう

Last updated at Posted at 2017-01-25

たとえば、こんなユーザーアイコンをコーディングするときに...

c53e654b-1e00-3ca9-e062-338c6b5fb030.png
_avators.slim.html
.legacy-avator
  .legacy-avator__image style="background-image: url('画像のURL');"
  .legacy-avator__badge 3

_legacy-avator.sass
.legacy-avator
  position: relative
  height: 64px
  width: 64px

  .legacy-avator__image
    width: 100%
    height: 100%
    background-size: cover
    background-position: center center
    +border-radius(32px)

  .legacy-avator__badge
  	// 省略

このようなコードを書いてしまうこと、ありますよね。
画像の縦横比が不明だけど、縦横比を維持したまま所定のサイズを埋めたい!
という要求を満たしたいがためにstyle属性を使う、という屈辱的なコードです。

そこで object-fit

object-fitの詳細はMDNなどで確認してください。
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

object-fitをつかうと、こんな風にすっきり記述できます。

_avators.slim.html
.avator
  img.avator__image src="画像のURL"
  .avator__badge 3
_avator.sass
.avator
  height: 64px
  width: 64px

  .avator__image
    width: 100%
    height: 100%
    object-fit: cover
    object-position: 50% 50%
    +border-radius(32px)

  .avator__badge
    // 省略

object-fitを使えば、余計なアトリビュートを使わずにimgタグとしてとても素直に記述できます。

きもちいい!!
2015年から使えたなんて知らなかったぜ。。。

対応ブラウザ

モダンなサービスなら問題無いんじゃないかな!

02b1017b-6123-81fb-bde6-4d71024c387d.png
df5187c0-b399-89b3-caa5-11063d33ae92.png
MDN > Web technology for developers > CSS > object-fit より

スクリーンショット 2017-01-26 15.22.12.png
Can I use より

17
19
1

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
17
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?