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>
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/