How format images in Elm-UI?

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.

An example


I would also be interested in a clear recap on how to handle images with elm-ui, it would make for interesting blog post!

I guess you want to use Background.uncropped for this. It does not crop the image, but fits to the container like you want ?

Not self-explaining that this is the way to do it… But now you know :slight_smile:

I believe this is a nice start:

1 Like

Background image is convenient, but semantically not great as it does not convey that an image may be meaningful, just decorative


Yep, I’m familiar with the background image trick from HTML, but I expected Elm-UI to not require such tricks.

Dirty trick to mitigate the semantic issue:

Not sure if it is better or worse. At least you can now right-click and “Save image as…”

I wonder if there are better solution


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.

A version with object-fit: contain

Yep, object-fit was the aforementioned workaround I did.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.