Image fixes (#191)

* contain vs. clip image
* hide image until loading is fully complete

Author: kimispencer

docs/Examples2/Image.example.purs

@@ -18,19 +18,19 @@ docs =
     , example
         $ Image.image
         $$$ "http://via.placeholder.com/640x360"
-    , h4_ "Image + resize { width: 120px, height: 40px }, respects image's aspect ratio & clips overflow"
+    , h4_ "Image + resize { width: 120px, height: 40px }, scales image to respect it's aspect ratio"
     , example
         $ Image.image
         $ Image.resize { width: 120, height: 40 }
-        $$$ "http://via.placeholder.com/640x360"
+        $$$ "http://via.placeholder.com/360x640"
     , h4_ "Thumbnail default (will always have a square aspect ratio)"
     , example
         $ Image.thumbnail
-        $$$ "http://via.placeholder.com/640x360"
-    , h4_ "Thumbnail + resize 48px"
+        $$$ "http://via.placeholder.com/360x640"
+    , h4_ "Thumbnail + resize 400px"
     , example
         $ Image.thumbnail
-        $ Image.resizeSquare 80
+        $ Image.resizeSquare 400
         $$$ flexo
     , h4_ "Thumbnail + small"
     , example

src/Lumi/Components2/Image.purs

@@ -102,7 +102,12 @@ image =
                         , E.element R.img'
                             { src: props.content
                             , className: ""
-                            , css: E.css { maxWidth: E.percent 100.0 }
+                            , css: E.css
+                                { maxWidth: E.percent 100.0
+                                , maxHeight: E.percent 100.0
+                                , objectFit: E.str "contain"
+                                , display: E.str $ if loaded then "block" else "none"
+                                }
                             , onLoad: handler_ $ setLoaded true
                             , onError: handler_ $ setLoaded true
                             }