0

Why does object-fit: contain/cover; have no effect?

<div style="width: 280px; height: 500px;">
    <img src="https://images.squarespace-cdn.com/content/v1/574dd66227d4bdb54a2f65e3/1521843944609-NYRD2YRLOP9HS2DLEB1F/ke17ZwdGBToddI8pDm48kCXjNEzRU16vKqZHoJ2wibt7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmtB678DRWVwYkSJZ19In_Ne5N2qo9t2w4kU5BfgrfRFnilh4mrZ2YFQG_bi7COdB2/BL_Website_ETD_rt_profile_store_v1.jpg" alt="something" style="object-fit: contain;">
 </div>
Temani Afif
  • 211,628
  • 17
  • 234
  • 311
tonitone
  • 54
  • 6

1 Answers1

1

Because you are not specifying a value for height or width in the <img>.

<div style="width: 280px; height: 500px;">
    <img src="https://images.squarespace-cdn.com/content/v1/574dd66227d4bdb54a2f65e3/1521843944609-NYRD2YRLOP9HS2DLEB1F/ke17ZwdGBToddI8pDm48kCXjNEzRU16vKqZHoJ2wibt7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmtB678DRWVwYkSJZ19In_Ne5N2qo9t2w4kU5BfgrfRFnilh4mrZ2YFQG_bi7COdB2/BL_Website_ETD_rt_profile_store_v1.jpg" alt="something" style="object-fit: contain; height: 180px">
 </div>

Have a read: https://css-tricks.com/almanac/properties/o/object-fit/

EdGzi
  • 1,181
  • 7
  • 24