object-fit css property ignored

Ask the community
,
2

I haven’t yet found an answer to this so I used a workaround:

// returns the style string needed to emulate "object-fit:contain"
function contain(preferredWidth, preferredHeight, givenWidth, givenHeight) {
 let objectFitEmulation = '';
 let scaledWidth = 0;
 let scaledHeight = 0;
 let marginLeft = 0;
 let marginRight = 0;
 let marginTop = 0;
 let marginBottom = 0;
 let preferredAspectRatio = preferredWidth/preferredHeight;
 if (givenWidth/givenHeight > preferredAspectRatio) {
            scaledWidth = preferredWidth;
            scaledHeight = Math.round(givenHeight * preferredWidth / givenWidth);
            marginTop = Math.round((preferredHeight - scaledHeight)/2);
            marginBottom = preferredHeight - marginTop - scaledHeight;
            objectFitEmulation += `margin-top:${marginTop}px;margin-bottom:${marginBottom}px;`;
        } else {
            scaledHeight = preferredHeight;
            scaledWidth = Math.round(givenWidth * preferredHeight / givenHeight);
            marginLeft = Math.round((preferredWidth - scaledWidth)/2)
            marginRight = preferredWidth - marginLeft - scaledWidth;
            objectFitEmulation += `margin-left:${marginLeft}px;margin-right:${marginRight}px;`;
        }
        objectFitEmulation += `width:${scaledWidth}px;height:${scaledHeight}px;`;
 return objectFitEmulation
    }