object-fit css property ignored

Ask the community
,
1

I have a repeater with an image. I want the image to fit in a box of 187x180px but maintaining whatever aspect ratio it happens to have (so it doesn’t need to cover 187x180px, just needs to fit within). Here’s my code:

let url = SOME_URL

$item('#htmlProfilePicture').html = `
        <img id="img" 
                class="filterPhoto" 
                src="${url}" 
                alt="profilePhoto" 
                style="object-fit:contain;height:180px;width:187px"
        >`;

(by they way, $item(‘#htmlProfilePicture’) is a text element)
It works fine apart from the fact that object-fit:contain is ignored. So when I inspect the source on my preview version of the page I get the height and width style params, but the object-fit is not there.
Inserting object-fit:contain into the developer tools of my browser yields the effect I’m looking for.

May be worth noting that I also tried putting the style in the header via the analytics and tracking section of the settings for the site. Like so:

  <style>
    img.filterPhoto {
        object-fit: contain;
      }
  </style>

But that didn’t help either.

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
    }