I am trying to: Create a view that displays images and other custom form data within columns. If the image is too big, I want the image to scale down proportionately.
Link to a page where the issue can be seen: hidden link
I expected to see: Each image looking proportional with respect to their height and width.
Instead, I got: Some images look warped.
What I found:
I found that the issue seems to be linked with how the src and srcset link to images. Within the view, the image link adds a -150x150.png. For example, if the url is normally hidden link it becomes hidden link
As a result, adding css to change the height and width or apply properties such as `object-fit` does not seem to have any effect.
However, when using the browser inspector and changing the srcset, it seems to fix the problem. For example, for the company listed as "Business Company", if you change the contents of its srcset in the inspector with hidden link 2000w, the image becomes scaled proportionately.
Sorry, my issue is resolved now. It seems the issue was how the image was being called in the view as the format selected was thumbnail (which explains the 150x150). By selecting full-size image, it seems to fix the issue.