How format images in Elm-UI?

Learn
1

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

2

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

3

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 :slight_smile:

4

I believe this is a nice start:
https://korban.net/elm/elm-ui-patterns/image

5

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

6

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

7

Dirty trick to mitigate the semantic issue: https://ellie-app.com/cxhg4S68Ksma1

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

8

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.

9

A version with object-fit: contain

https://ellie-app.com/cxthkNw4HTQa1

10

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