예를 들어, 이러한 사용자 아이콘을 코딩할 때...



_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 등에서 확인하십시오.
htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 엔 - u S / 두 cs / u b / Cs / 오 b ぇ ct - t

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년부터 사용할 수 있었다니 몰랐어. . .

대응 브라우저

현대적인 서비스라면 문제 없잖아!



MDN > Web technology for developers > CSS > object-fit


Can I use