Forum Discussion
JSON formatting for changing image size
Can anyone help me with adjusting the image size on the tile view in SharePoint? I cannot seem to make the thumbnail of my image column smaller (I've tried a bunch of code already adn nothing is working).
Any ideas? I just want to make the image a small square so that I can see all the columns in my tile without having to scroll.
Hey!
To resize the images in the tile view of your SharePoint list or library, here's a quick solution you can try using JSON column formatting.
Try the Following JSON:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", "elmType": "img", "attributes": { "src": "[$YourImageColumn]", "style": "width: 50px; height: 50px; object-fit: cover;" } }
What’s Happening Here:
"elmType": "img": This tells SharePoint that the column will display an image."src": "[$YourImageColumn]": This is where the image source comes from — make sure to replace YourImageColumn with the actual name of your image column.
"style": "width: 50px; height: 50px; object-fit: cover;": This sets the image size to 50x50 pixels. You can adjust this size to whatever works for you. The object-fit: cover part ensures the image fits nicely into the box without stretching or distorting.
Hope that helps!
1 Reply
Hey!
To resize the images in the tile view of your SharePoint list or library, here's a quick solution you can try using JSON column formatting.
Try the Following JSON:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", "elmType": "img", "attributes": { "src": "[$YourImageColumn]", "style": "width: 50px; height: 50px; object-fit: cover;" } }
What’s Happening Here:
"elmType": "img": This tells SharePoint that the column will display an image."src": "[$YourImageColumn]": This is where the image source comes from — make sure to replace YourImageColumn with the actual name of your image column.
"style": "width: 50px; height: 50px; object-fit: cover;": This sets the image size to 50x50 pixels. You can adjust this size to whatever works for you. The object-fit: cover part ensures the image fits nicely into the box without stretching or distorting.
Hope that helps!