I have a popup configured to show an image 100px by 100px. The images aren't all square so I'm trying to get the image to be cropped using the 'object-fit' property of the <img> tag. The relevant snippet of ARCADE code is included below:
if ($feature.thumbnailimageurl != null){
image = "<img src='" + $feature.thumbnailimageurl + "' alt='Photograph of " + studyspacename + "' width='100px' height='100px' style='float:right; padding-left:5px; overflow:clip; object-fit:cover;'/>"
}
However, using the Dev Tools to inspect the source of the map it seems that Map Viewer is stripping off the 'object-fit' property as the <img> tag in the popup is rendered as follows:
<img src="https://edinageo.maps.arcgis.com/sharing/rest/content/items/7e43551055214d9abb9623560c7bea90/data" alt="Photograph of Law School Library" width="100px" height="100px" style="float:right; padding-left:5px; overflow:clip;">
Note that the 'object-fit' property is not there.
Consequently any of the images that are not roughly square look horrible as they get squished to 100px by 100px.
Is this a known limitation in Map Viewer (annoyingly using the exact same code in Experience Builder to display the image in a Card Widget works fine)? Is there a documented list of supported properties anywhere? Is there a workaround? Any help would be greatly appreciated as it's not feasible to resize all my images to be square as they're used in other live services where the aspect ratio doesn't matter.
Original image:
How it displays in Map Viewer: [note the image is squashed horizontally]
How it displays in a Card Widget in Experience Builder: [note the image is not squashed at all and is cropped retaining the central section (this is what I'm trying to replicate in Map Viewer)]
Accepted Solutions
