<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>idea Add support for 'object-fit' CSS property in ArcGIS Online Ideas</title>
    <link>https://community.esri.com/t5/arcgis-online-ideas/add-support-for-object-fit-css-property/idi-p/1673640</link>
    <description>&lt;P&gt;This follows on from this question:&amp;nbsp;&lt;A href="https://community.esri.com/t5/arcgis-online-questions/map-viewer-strips-object-fit-property-for-img-tags/m-p/1673056" target="_blank"&gt;https://community.esri.com/t5/arcgis-online-questions/map-viewer-strips-object-fit-property-for-img-tags/m-p/1673056&lt;/A&gt;&lt;/P&gt;&lt;P&gt;According to &lt;A href="https://doc.arcgis.com/en/arcgis-online/reference/supported-html.htm" target="_self"&gt;this help page&lt;/A&gt;, the '&lt;FONT face="courier new,courier"&gt;object-fit&lt;/FONT&gt;' CSS property is not supported in ArcGIS Online.&amp;nbsp; Adding this property to the &lt;FONT face="courier new,courier"&gt;style&lt;/FONT&gt; attribute of an &lt;FONT face="courier new,courier"&gt;&amp;lt;img&amp;gt;&lt;/FONT&gt; tag gets removed from the rendered map.&amp;nbsp; However, it does appear to be supported in Experience Builder as adding the exact same HTML the image is rendered in ExB as desired.&lt;/P&gt;&lt;P&gt;This idea is to add support for the&amp;nbsp;'&lt;FONT face="courier new,courier"&gt;object-fit&lt;/FONT&gt;' CSS property across the whole ArcGIS Online environment, as it will vastly improve the display of inline images across all applications.&amp;nbsp; Example below that illustrates the problem and why I think this would be a good idea.&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;Original image:&lt;/STRONG&gt;&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="MappyIan_0-1765988199310.jpeg" style="width: 400px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/145733iAFD5A427453BB4FB/image-size/medium?v=v2&amp;amp;px=400" role="button" title="MappyIan_0-1765988199310.jpeg" alt="MappyIan_0-1765988199310.jpeg" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;ARCADE used to render this image as a 100px by 100px thumbnail:&lt;/STRONG&gt;&lt;/P&gt;&lt;P&gt;As the image isn't square I'm trying to get the image to be cropped using the '&lt;FONT face="courier new,courier"&gt;object-fit&lt;/FONT&gt;' property of the &lt;FONT face="courier new,courier"&gt;style&lt;/FONT&gt; attribute of the&amp;nbsp;&lt;FONT face="courier new,courier"&gt;&amp;lt;img&amp;gt;&lt;/FONT&gt; tag. The relevant snippet of ARCADE code is included below:&lt;/P&gt;&lt;PRE&gt;&lt;SPAN&gt;if&lt;/SPAN&gt;&lt;SPAN&gt; (&lt;/SPAN&gt;&lt;SPAN&gt;$feature&lt;/SPAN&gt;&lt;SPAN&gt;.&lt;/SPAN&gt;&lt;SPAN&gt;thumbnailimageurl&lt;/SPAN&gt;&lt;SPAN&gt; != &lt;/SPAN&gt;&lt;SPAN&gt;null&lt;/SPAN&gt;&lt;SPAN&gt;){&lt;/SPAN&gt;&lt;BR /&gt;&lt;SPAN&gt;&amp;nbsp; &lt;/SPAN&gt;&lt;SPAN&gt;image&lt;/SPAN&gt;&lt;SPAN&gt; = &lt;/SPAN&gt;&lt;SPAN&gt;"&amp;lt;img src='"&lt;/SPAN&gt;&lt;SPAN&gt; + &lt;/SPAN&gt;&lt;SPAN&gt;$feature&lt;/SPAN&gt;&lt;SPAN&gt;.&lt;/SPAN&gt;&lt;SPAN&gt;thumbnailimageurl&lt;/SPAN&gt;&lt;SPAN&gt; + &lt;/SPAN&gt;&lt;SPAN&gt;"' alt='Photograph of "&lt;/SPAN&gt;&lt;SPAN&gt; + &lt;/SPAN&gt;&lt;SPAN&gt;studyspacename&lt;/SPAN&gt;&lt;SPAN&gt; + &lt;/SPAN&gt;&lt;SPAN&gt;"' width='100px' height='100px' style='float:right; padding-left:5px; overflow:clip; object-fit:cover;'/&amp;gt;"&lt;/SPAN&gt;&lt;BR /&gt;&lt;SPAN&gt;}&lt;/SPAN&gt;&lt;/PRE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;How it displays in Map Viewer:&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;&lt;/STRONG&gt;[note the image is squashed horizontally]&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="MappyIan_1-1765988199323.png" style="width: 400px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/145734i8C21A7C29F11D817/image-size/medium?v=v2&amp;amp;px=400" role="button" title="MappyIan_1-1765988199323.png" alt="MappyIan_1-1765988199323.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;How it displays in a Card Widget in Experience Builder:&lt;/STRONG&gt;&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;[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)]&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="MappyIan_2-1765988199295.png" style="width: 400px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/145732i5057A5E75032E5AD/image-size/medium?v=v2&amp;amp;px=400" role="button" title="MappyIan_2-1765988199295.png" alt="MappyIan_2-1765988199295.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
    <pubDate>Wed, 17 Dec 2025 16:20:58 GMT</pubDate>
    <dc:creator>MappyIan</dc:creator>
    <dc:date>2025-12-17T16:20:58Z</dc:date>
    <item>
      <title>Add support for 'object-fit' CSS property</title>
      <link>https://community.esri.com/t5/arcgis-online-ideas/add-support-for-object-fit-css-property/idi-p/1673640</link>
      <description>&lt;P&gt;This follows on from this question:&amp;nbsp;&lt;A href="https://community.esri.com/t5/arcgis-online-questions/map-viewer-strips-object-fit-property-for-img-tags/m-p/1673056" target="_blank"&gt;https://community.esri.com/t5/arcgis-online-questions/map-viewer-strips-object-fit-property-for-img-tags/m-p/1673056&lt;/A&gt;&lt;/P&gt;&lt;P&gt;According to &lt;A href="https://doc.arcgis.com/en/arcgis-online/reference/supported-html.htm" target="_self"&gt;this help page&lt;/A&gt;, the '&lt;FONT face="courier new,courier"&gt;object-fit&lt;/FONT&gt;' CSS property is not supported in ArcGIS Online.&amp;nbsp; Adding this property to the &lt;FONT face="courier new,courier"&gt;style&lt;/FONT&gt; attribute of an &lt;FONT face="courier new,courier"&gt;&amp;lt;img&amp;gt;&lt;/FONT&gt; tag gets removed from the rendered map.&amp;nbsp; However, it does appear to be supported in Experience Builder as adding the exact same HTML the image is rendered in ExB as desired.&lt;/P&gt;&lt;P&gt;This idea is to add support for the&amp;nbsp;'&lt;FONT face="courier new,courier"&gt;object-fit&lt;/FONT&gt;' CSS property across the whole ArcGIS Online environment, as it will vastly improve the display of inline images across all applications.&amp;nbsp; Example below that illustrates the problem and why I think this would be a good idea.&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;Original image:&lt;/STRONG&gt;&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="MappyIan_0-1765988199310.jpeg" style="width: 400px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/145733iAFD5A427453BB4FB/image-size/medium?v=v2&amp;amp;px=400" role="button" title="MappyIan_0-1765988199310.jpeg" alt="MappyIan_0-1765988199310.jpeg" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;ARCADE used to render this image as a 100px by 100px thumbnail:&lt;/STRONG&gt;&lt;/P&gt;&lt;P&gt;As the image isn't square I'm trying to get the image to be cropped using the '&lt;FONT face="courier new,courier"&gt;object-fit&lt;/FONT&gt;' property of the &lt;FONT face="courier new,courier"&gt;style&lt;/FONT&gt; attribute of the&amp;nbsp;&lt;FONT face="courier new,courier"&gt;&amp;lt;img&amp;gt;&lt;/FONT&gt; tag. The relevant snippet of ARCADE code is included below:&lt;/P&gt;&lt;PRE&gt;&lt;SPAN&gt;if&lt;/SPAN&gt;&lt;SPAN&gt; (&lt;/SPAN&gt;&lt;SPAN&gt;$feature&lt;/SPAN&gt;&lt;SPAN&gt;.&lt;/SPAN&gt;&lt;SPAN&gt;thumbnailimageurl&lt;/SPAN&gt;&lt;SPAN&gt; != &lt;/SPAN&gt;&lt;SPAN&gt;null&lt;/SPAN&gt;&lt;SPAN&gt;){&lt;/SPAN&gt;&lt;BR /&gt;&lt;SPAN&gt;&amp;nbsp; &lt;/SPAN&gt;&lt;SPAN&gt;image&lt;/SPAN&gt;&lt;SPAN&gt; = &lt;/SPAN&gt;&lt;SPAN&gt;"&amp;lt;img src='"&lt;/SPAN&gt;&lt;SPAN&gt; + &lt;/SPAN&gt;&lt;SPAN&gt;$feature&lt;/SPAN&gt;&lt;SPAN&gt;.&lt;/SPAN&gt;&lt;SPAN&gt;thumbnailimageurl&lt;/SPAN&gt;&lt;SPAN&gt; + &lt;/SPAN&gt;&lt;SPAN&gt;"' alt='Photograph of "&lt;/SPAN&gt;&lt;SPAN&gt; + &lt;/SPAN&gt;&lt;SPAN&gt;studyspacename&lt;/SPAN&gt;&lt;SPAN&gt; + &lt;/SPAN&gt;&lt;SPAN&gt;"' width='100px' height='100px' style='float:right; padding-left:5px; overflow:clip; object-fit:cover;'/&amp;gt;"&lt;/SPAN&gt;&lt;BR /&gt;&lt;SPAN&gt;}&lt;/SPAN&gt;&lt;/PRE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;How it displays in Map Viewer:&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;&lt;/STRONG&gt;[note the image is squashed horizontally]&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="MappyIan_1-1765988199323.png" style="width: 400px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/145734i8C21A7C29F11D817/image-size/medium?v=v2&amp;amp;px=400" role="button" title="MappyIan_1-1765988199323.png" alt="MappyIan_1-1765988199323.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;How it displays in a Card Widget in Experience Builder:&lt;/STRONG&gt;&lt;SPAN&gt;&amp;nbsp;&lt;/SPAN&gt;[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)]&lt;/P&gt;&lt;P&gt;&lt;span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="MappyIan_2-1765988199295.png" style="width: 400px;"&gt;&lt;img src="https://community.esri.com/t5/image/serverpage/image-id/145732i5057A5E75032E5AD/image-size/medium?v=v2&amp;amp;px=400" role="button" title="MappyIan_2-1765988199295.png" alt="MappyIan_2-1765988199295.png" /&gt;&lt;/span&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Wed, 17 Dec 2025 16:20:58 GMT</pubDate>
      <guid>https://community.esri.com/t5/arcgis-online-ideas/add-support-for-object-fit-css-property/idi-p/1673640</guid>
      <dc:creator>MappyIan</dc:creator>
      <dc:date>2025-12-17T16:20:58Z</dc:date>
    </item>
  </channel>
</rss>

