# How format images in Elm-UI?

**URL:** <https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020>\
**Category:** Learn\
**Created:** [February 28, 2021, 3:08pm UTC](https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020 "2021-02-28T15:08:44Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![wondible](https://avatars.discourse-cdn.com/v4/letter/w/e9c0ed/32.png) [@wondible](https://discourse.elm-lang.org/u/wondible)\
**Post date:** [February 28, 2021, 3:08pm UTC](https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020/1 "2021-02-28T15:08:44Z")

</div>

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](https://ellie-app.com/cvykLdc5x5pa1)

---

<div class="post-metadata">

**Author:** ![mattpiz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mattpiz/32/860_2.png) [@mattpiz](https://discourse.elm-lang.org/u/mattpiz)\
**Post date:** [February 28, 2021, 6:25pm UTC](https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020/2 "2021-02-28T18:25:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Atlewee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/atlewee/32/4603_2.png) [@Atlewee](https://discourse.elm-lang.org/u/Atlewee)\
**Post date:** [March 1, 2021, 3:32pm UTC](https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020/3 "2021-03-01T15:32:40Z")

</div>

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](https://ellie-app.com/cvZDpzYxCxpa1)

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

---

<div class="post-metadata">

**Author:** ![passiomatic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/passiomatic/32/1250_2.png) [@passiomatic](https://discourse.elm-lang.org/u/passiomatic)\
**Post date:** [March 1, 2021, 3:39pm UTC](https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020/4 "2021-03-01T15:39:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mattpiz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mattpiz/32/860_2.png) [@mattpiz](https://discourse.elm-lang.org/u/mattpiz)\
**Post date:** [March 1, 2021, 4:41pm UTC](https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020/5 "2021-03-01T16:41:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![wondible](https://avatars.discourse-cdn.com/v4/letter/w/e9c0ed/32.png) [@wondible](https://discourse.elm-lang.org/u/wondible)\
**Post date:** [March 2, 2021, 2:13pm UTC](https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020/6 "2021-03-02T14:13:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lucamug](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucamug/32/1764_2.png) [@lucamug](https://discourse.elm-lang.org/u/lucamug)\
**Post date:** [March 4, 2021, 12:28pm UTC](https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020/7 "2021-03-04T12:28:27Z")

</div>

Dirty trick to mitigate the semantic issue: [https://ellie-app.com/cxhg4S68Ksma1](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

---

<div class="post-metadata">

**Author:** ![joakin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/joakin/32/171_2.png) [@joakin](https://discourse.elm-lang.org/u/joakin)\
**Post date:** [March 4, 2021, 3:22pm UTC](https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020/8 "2021-03-04T15:22:27Z")

</div>

I don’t know about elm-ui but for CSS if you don’t support IE or have fallbacks, [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) is pretty cool and fills some of the gap of the background tricks with normal images.

---

<div class="post-metadata">

**Author:** ![lucamug](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucamug/32/1764_2.png) [@lucamug](https://discourse.elm-lang.org/u/lucamug)\
**Post date:** [March 4, 2021, 10:22pm UTC](https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020/9 "2021-03-04T22:22:17Z")

</div>

A version with `object-fit: contain`

[https://ellie-app.com/cxthkNw4HTQa1](https://ellie-app.com/cxthkNw4HTQa1)

---

<div class="post-metadata">

**Author:** ![wondible](https://avatars.discourse-cdn.com/v4/letter/w/e9c0ed/32.png) [@wondible](https://discourse.elm-lang.org/u/wondible)\
**Post date:** [March 5, 2021, 1:22pm UTC](https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020/10 "2021-03-05T13:22:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [March 15, 2021, 1:22pm UTC](https://discourse.elm-lang.org/t/how-format-images-in-elm-ui/7020/11 "2021-03-15T13:22:42Z")

</div>

Closed on March 15, 2021, 1:22pm UTC

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