I want take an arbitrary size image and fit it into a known, mostly smaller, space. I tried several combinations of width and height on both the image and a container element, and could never find a combination that works. The image is either overextending in one dimension, cut-off, or squished. I ended up using a bit of html and some css to get the effect I wanted.
I know I should be using images at the target size, but at the moment I’m working on front-end, not data processing, and I was really surprised that this was hard in elm-ui.
I guess you want to use Background.uncropped for this. It does not crop the image, but fits to the container like you want ?
Ellie: https://ellie-app.com/cvZDpzYxCxpa1
Not self-explaining that this is the way to do it… But now you know
I don’t know about elm-ui but for CSS if you don’t support IE or have fallbacks, object-fit is pretty cool and fills some of the gap of the background tricks with normal images.