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: