Skip to content
This repository has been archived by the owner on Jun 18, 2022. It is now read-only.

Latest commit

 

History

History
29 lines (22 loc) · 4 KB

extended-comparison.md

File metadata and controls

29 lines (22 loc) · 4 KB

Additional comparisons with alternatives

Continues from readme.md

Performance

object-fit-images tonipinel/object-fit-polyfill jonathantneal/fitie
Size 1.6KB 1.9KB 1.5KB
Update wait 💚 No wait, applied before image load 💚 No wait, applied before image load 💔 Wait until full image load
Additional DOM elements necessary 💚 No 💔 Yes, a wrapping element is added 💔 Yes, a wrapping element is added
Performance overhead 💰 💰💰💰 💰💰
Technique description Transparent src image; Image in <img>'s background Wrapper element with style copied from <img>; CSS+JS positioning; Original <img> hidden Wrapper element with style copied from <img>; JS positioning

Ease of use

object-fit-images tonipinel/object-fit-polyfill jonathantneal/fitie
Object-fit definition 💛 In CSS, via font-family property * 💔 Via data attribute in HTML (data-object-fit="cover") 💔 Via class in HTML (class="cover")
Support changes in @media query 💚 Optional, with {watchMQ:true} 💔 No 💔 No
onresize listener 💚 Unnecessary, unless you use scale-down 💚 Unnecessary 💔 Yes, manually
Fix new elements automatically 💚 Optional, with objectFitImages() or objectFitImages(false) 💔 Impossible 💛 Manually
<img> src changes 💚 Automatically reflected 💔 Image not updated at all 💔 Fix not updated
Other limitations 💔 Any onload events on <img> will fire again when it fixes 💚 I didn't find any 💔 Some CSS declaration might be broken because partially moved to the wrapper

Runner-ups: