Forum Discussion
JSON formatting for changing image size
- Apr 11, 2025
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!
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!