Continues from readme.md
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 |
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:
- anselmh/object-fit is deprecated, doesn't support Edge and clocks in at 14KB.
- @primozcigler/neat-trick requires jQuery and Modernizr, + more cons similar to the other two.