1

What I'm trying to do is replicate the look of the news.aspx page for a custom view:

enter image description here

To ensure the thumbnail maintains its aspect ratio when it's resized, I figured I'd add the same method that's used in the news.aspx page: wrap the image in a div with width and height and use object-fit to resize the image:

"children": [
                {
                      "elmType": "div",
                      "style": {                           
                        "width": "276px",
                        "height":"154px"                            
                      },
                      "children": [
                        {
                          "elmType": "img",
                          "style": {
                            "display": "block",
                            "opacity":" 1",
                            "width": "100%",
                            "height": "100%",
                            "object-fit": "cover",
                            "position": "absolute",
                            "left": "50%",
                            "top": "50%",
                            "transform":" translate(-50%, -50%)"

                          },
                          "attributes": {
                            "src": "[$BannerImageUrl]"
                          }
                        }
                      ]
                    },

This just blows the images up and creates a mess. Before I start from scratch, can anyone confirm whether this looks right?

Here's the complete json (the elements at the bottom aren't populated with anything yet):

{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"debugMode": false,
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
  "elmType": "div",
  "attributes": {
    "class": "ms-borderColor-neutralLight"
  },
  "style": {
    "flex-direction": "column",
    "align-items": "stretch",
    "box-sizing": "border-box",
    "border-width": "1px",
    "border-left-width": "1px",
    "border-style": "solid"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-wrap": "wrap",
        "align-items": "center",
        "box-sizing": "border-box",
        "padding": "0"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "flex": " "
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "width": "276px",
                "height":"154px"
              },
              "attributes": {
                "class": "ms-NewsPinningItemImage"
              },
              "children": [
                {
                      "elmType": "div",
                      "style": {                           
                        "width": "100%",
                        "height":"100%"                            
                      },
                      "children": [
                        {
                          "elmType": "img",
                          "style": {
                            "display": "block",
                            "opacity":" 1",
                            "width": "100%",
                            "height": "100%",
                            "object-fit": "cover",
                            "position": "absolute",
                            "left": "50%",
                            "top": "50%",
                            "transform":" translate(-50%, -50%)"

                          },
                          "attributes": {
                            "src": "[$BannerImageUrl]"
                          }
                        }
                      ]
                    },

                {
                  "elmType": "a",
                  "attributes": {
                    "class": " ",
                    "target": "_blank",
                    "href": "[$FileRef]"
                  },
                  "style": {
                    "line-height": "1.5em",
                    "margin": "8px 0",
                    "font-size": "21px",
                    "font-weigth": "300",
                    "padding-left": "18px",
                    "padding-right": "10px",
                    "font-family": "Segoe UI Light",
                    "color": "#999",
                    "text-decoration": "none",
                    "display": "block"
                  },
                  "txtContent": "[$Title]"
                },
                {
                  "elmType": "span",
                  "attributes": {
                    "class": "ms-font-xl"
                  },
                  "style": {
                    "line-height": "1.5em",
                    "color": "gray",
                    "margin": "8px 0",
                    "font-size": "15px",
                    "font-family": "Helvetica",
                    "display": "block"
                  },
                  "txtContent": "[$Description]"
                },
                {
                  "elmType": "span",
                  "attributes": {
                    "class": "ms-font-xl"
                  },
                  "style": {
                    "line-height": "1.5em",
                    "color": "gray",
                    "margin": "8px 0",
                    "font-size": "15px",
                    "font-family": "Helvetica"                      
                  },
                  "txtContent": "[$Author.title]"
                },
                {
                  "elmType": "span",
                  "attributes": {
                    "class": "ms-font-xl"
                  },
                  "style": {
                    "line-height": "1.5em",
                    "color": "gray",
                    "margin": "8px 0",
                    "margin-left": "8px",
                    "font-size": "12px",
                    "font-family": "Helvetica"
                  },
                  "txtContent": "[$FirstPublishedDate]"
                },
                {
                  "elmType": "span",
                  "attributes": {
                    "class": "ms-font-xl"
                  },
                  "style": {
                    "line-height": "1.5em",
                    "color": "gray",
                    "margin": "8px 0",
                    "margin-left": "8px",
                    "font-size": "15px",
                    "font-family": "Helvetica"
                  },
                  "txtContent": ""
                },
                {
                  "elmType": "div",
                  "attributes": {
                    "class": "ms-font-m"
                  },
                  "style": {
                    "line-height": "1.5em",
                    "margin": "8px 0"
                  },
                  "children": [
                    {
                      "elmType": "div",
                      "style": {
                        "margin-left": "85px"
                      },
                      "children": [
                        {
                          "elmType": "div",
                          "txtContent": ""
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "padding": "4px 88px",
        "line-height": "1.5em",
        "display": "flex",
        "justify-content": "space-between"
      },
      "children": [
        {
          "elmType": "span",
          "children": [
            {
              "elmType": "span",
              "style": {
                "vertical-align": "bottom",
                "margin": "0 9px 0 1px"
              },
              "attributes": {
                "iconName": ""
              }
            },
            {
              "elmType": "span",
              "txtContent": ""
            },
            {
              "elmType": "a",
              "style": {
                "vertical-align": "bottom",
                "margin": "0 9px 0 20px"
              },
              "attributes": {
                "iconName": "",
                "target": "_blank",
                "href": ""
              }
            }
          ]
        }
      ]
    }
  ]
}

}

1 Answer 1

2

SharePoint column formatting does not currently support the object-fit property. The list of supported style properties is located here: Styles

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.