Image Sizing in elm-ui
Submitted by Bill St. Clair on Thu, 06 Dec 2018 03:53:36 GMT
I've been using Matthew Griffith's wonderful elm-ui package to make the user interface for GabDecker, a TweetDeck-like web app I'm building for Gab.com. I've had inline images since the beginning, scaled to fit the column width. Today I made clicking on one of those image open a dialog with the full-size version, scaled down if necessary to fit the available space.
elm-ui eschews CSS in the source code, usually making it much easier to get what you want. But in this case, I was NOT getting what I wanted, so I wrote my own CSS, and learned about the object-fit property in the process.
Here's the code that's now running:
imageDialog : String -> Model -> Element Msg
imageDialog url model =
let
maxw =
9 * model.windowWidth // 10
maxws =
String.fromInt maxw ++ "px"
maxh =
9 * model.windowHeight // 10
maxhs =
String.fromInt (9 * model.windowHeight // 10) ++ "px"
in
column
-- This is black magic.
-- It took much play with the CSS to get it right.
[ centerX
, centerY
]
[ standardButton "" CloseDialog <|
(Html.img
[ Attributes.style "object-fit" "contain"
, Attributes.style "max-width" maxws
, Attributes.style "max-height" maxhs
, Attributes.style "border" "2px solid black"
, Attributes.style "width" "auto"
, Attributes.style "height" "auto"
, Attributes.src url
]
[]
|> Element.html
)
]
