List layout with json not works as expected

Question

I tried using below json code to make list like tile.

It works as expected when open it in the list however, the layout changed when use this list as web part in page.

Figure 1 : Open in list

Figure 2 : List used as web part

Is there any way to make Figure 2 layout same as Figure 1?

I am appreciate for your great help!

Json code:

    {
    "schema": 
    "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
     "hideSelection": "true", 
     "hideColumnHeader": "true", 
     "rowFormatter": 
     { "elmType": "a", 
      "attributes": 
       {
     "href": "[$URL]", 
    "target": "=if([$OpenInNewTab] == true, '_blank', '')" 
    }, 
    "style": { "float": "left" }, 
    "children": [ { 
    "elmType": "div", 
    "attributes": 
    { 
    "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover" 
    }, 
    "style": 
    { 
    "display": "flex", 
    "flex-wrap": "wrap", 
    "min-width": "80px", 
    "min-height": "50px", 
    "margin-right": "10px", 
    "box-shadow": "2px 2px 4px darkgrey" 
    }, 
    "children": 
    [ 
    { 
    "elmType": "div", 
    "style": 
    {
    }, 
    "padding": "0 25%", 
    "children": 
    [ 
    { 
    "elmType": "img", 
    "style": 
    { 
    "vertical-align": "top" 
    }, 
    "attributes": 
    { 
    "src": "[$thumbnail]" 
    } 
    } 
    ] 
    } 
    ] 
    } 

] 
    } 
}

Answer 1

If I understand correctly, you want this result:

So I change a little your code in order to match the json formatter v2 for sharepoint Online:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",                
"debugMode": true, 
"elmType": "div",
"style": {
    "display": "block",
    "min-height": "50px"                      
},
"attributes": {
    "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"                   
},
"children": [
    {
        "elmType":"a",
        "attributes": {
            "href": "[$URL]",
            "target": "=if([$OpenInNewTab] == true, '_blank', '')"
        },
        "children": [
            {
                "elmType": "img",
                "style" : {
                    "max-width": "100%",
                    "height": "5rem",
                    "margin-left": "auto",
                    "margin-right": "auto",
                    "padding": "0.5rem",
                    "display": "block"
                },
                "attributes": {
                    "src": "[$thumbnail]"
                }
            }
        ]
    }
]

}

If you dont like the size of the icon image you can change it on the children related to the img tag.