I'm having difficulties getting my list to display as intended. Can anyone help please?
I have a list, and one column is a calculated field which points to a JPG file. These are A4, scanned at 300dpi. The JSON formatting is intended to display a very small sub-section of the image -- but I do not appear to get things to work as intended.
My approach so far has been to (1) select the portion of the image I want, then (2) scale it to size. I do not want to use an image editor to cut out the relevant section. This has to be done using CSS.
If I mock up a normal HTML page, this gives an idea of what I expect:
img {
border: 1px solid red;
border-radius: 8px;
width: 1000px;
height: 320px;
object-position: 60% 73%;
object-fit: none;
transform: scale(.2, .2);
}
</style>
So, my JSON string is:
{
"elmType": "a",
"attributes": {
"href": "@currentField",
"target": "_blank"
},
"children": [
{
"elmType": "img",
"style": {
"border": "1px solid red",
"border-radius": "8px",
"width": "1000px",
"height": "320px",
"object-position": "60% 73%",
"object-fit": "none",
"transform": "scale(.2, .2)"
},
"attributes": {
"src": "@currentField"
}
}
]
}
However, this gives no image whatsoever. If I remove the transform, I do get an image, but (a) it's not the correct portion of the image, and (b) it is, of course, far too large.
Is there a way I can solve this? Rather than use transform, could I potentially crop the correct portion of the image into a DIV, and then auto-scale that to a final size of 100x32px? Or is there another potential approach?
Many thanks.
