Picture column different sizes

Martin, Heidi (SE GP T SP PS) 531 Reputation points
2024-09-30T05:34:57.3566667+00:00

Good morning, can someone tell me why a picture column displays the pictures in different sizes?User's image

Thank you!

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,675 questions
{count} votes

2 answers

Sort by: Most helpful
  1. AllenXu-MSFT 19,961 Reputation points Microsoft Vendor
    2024-09-30T09:28:03.0366667+00:00

    Hi @Martin, Heidi (SE GP T SP PS),

    Is this an image type column? Did you apply any JSON column formatting to it? User's image


  2. AllenXu-MSFT 19,961 Reputation points Microsoft Vendor
    2024-10-03T02:16:06.4633333+00:00

    Hi @Martin, Heidi (SE GP T SP PS),

    Sorry for my late reply. I just come back from a vacation.

    For image type columns, we have no way to fix or modify the images' sizes using JSON formatting. It is not supported by SharePoint.

    As a workaround, you can create a Hyperlink or Picture column as an instead. Set Format URL as Picture.

    User's image

    Upload images to a document library and add items in the list with the link format: https://<tenant>/sites/<sitename>/<documentlibrayname>/<imagename>

    Apply below JSON code to your Picture column. Modify the parameter values in the code to what you want the picture size should be like.

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "div",
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "@currentField"
          },
          "style": {
            "position": "relative",
            "top": "50%",
            "left": "50%",
            "width": "350px",
            "height": "350px",
            "margin-left": "-50%",
            "margin-top": "0%"
          }
        }
      ]
    }
    

    Thanks.


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.