Support picture

[fregante]

Like #2, but could be problematic because <picture> overrides whatever is in <img src>. It might need an additional overriding <source> element to be added and removed while checking.

This could already be working with a <picture> polyfill because it supports changes to the src property (which a polyfill would have to change)

This is only needed where <picture> is supported, but object-fit/object-position isn't, which is Edge 13-14, Safari 9.1, iOS 9.3

The support here could be added by duplicating the entire <picture> element and use that to figure out the current value of currentSrc on resize and could also be a solution to #13

[tobaco]

Thanks for this wonderful script.
I'm now in need for the picture element and noticed, that it doesn't work with picture.
Is there any news/progress on this one?

Thanks!

[bdbch]

As far as I understood the problem, we currently support the picturefill-functionality but the native picture-element is not supported and the image is not replaced on mobile?

I would like to get in touch with this problem since I need this functionality pretty often. Did you already started @bfred-it or have any concept for this?

Also are there any rules for contribution for this repository?

[fregante]

Sorry for the delay but I haven't had much time to contribute to this.

The idea I had was to have a copy of the original img (and its <picture>) and poll that element for the computed src, but I haven't gotten around to it. This solution would also replace the current logic for the srcset. I'm afraid it's not going to be particularly easy to implement, though, I think picture depends on the actual size on the page as well.

An alternative for now would be to use a different script, like constancecchen/object-fit-polyfill

[jonas8]

I have a workaround idea on the native picture support (Edge 13-14, Safari 9.1, iOS 9.3)
After setting the background-image on img tag, we just remove the relevant srcset value on source element, the defined background style on img tag will work as expected.

el.parentNode.querySelectorAll('source').forEach((sourcenode) => {
    let srcset = sourcenode.getAttribute('srcset')
    if (srcset === el.currentSrc) {
        nativeSetAttribute.call(sourcenode, "data-ofi-srcset", srcset);
	sourcenode.setAttribute('srcset', '')
   }
})

When el.currentSrc changed, restore the source srcset value from data.

[honboubao]

I took up the idea of having a copy of the picture tag. It seems to me a bit of a quick'n'dirty solution, but it work fine for my use case at least. So right after new Image(...)

if (window.HTMLPictureElement) {
	var sourceNodes = el.parentNode.querySelectorAll('source');
	if (sourceNodes.length > 0) {
		ofi.picture = document.createElement('picture');
		ofi.picture.style.display = 'none';
		for (var i = 0; i < sourceNodes.length; i++) {
			ofi.picture.appendChild(sourceNodes[i]);
		}
		ofi.picture.appendChild(ofi.img);
		el.parentNode.insertBefore(ofi.picture, el);
		ofi.img.onload = function(e) {
			fixOne(el);
		};
	}
}

[lbineau]

Any news on this issue?

[thedamon]

Edge supports object-fit on images, so these days I think you'd just need this and picture-fill and you should be good, until you want to use object-fit on a video or canvas element.?

[jamealg]

From what I can tell this library works perfectly with picture element in IE11. It's my understanding that object-fit is meant to be applied to the img element instead of picture so that's how I have it configured. Is there a specific use case or something else I'm missing?

[patricknelson]

Actually, I'm noticing that this seems to be working now in Edge 42 (released April 30, 2018), but I do recall this being an issue before. I believe a vast majority of people using Edge will likely automatically be on this newer version. Should we go ahead and close this issue?

Here's a little test page I've got with both object-fit (applied to the inner <img> tag) and <picture> with various sources depending on the current breakpoint:

EDIT: Corrected Edge version and clarifying that this was an issue but this "Edge" case may have been resolved.

[fregante]

Edge 16 (October 2017) supports object-fit natively, so this polyfill doesn't apply there at all.