Merge pull request beeware#2276 from freakboy3742/image-shrink

changes/2275.bugfix.rst

@@ -0,0 +1 @@
+ImageViews with ``flex=1`` will now shrink to fit if the image is larger than the available space.

core/src/toga/widgets/imageview.py

@@ -38,22 +38,22 @@ def rehint_imageview(image, style, scale=1):
             width = int(style.width * scale)
             height = int(style.width * scale / aspect_ratio)
             if style.flex:
-                height = at_least(height)
+                height = at_least(0)
         elif style.height != NONE:
             # Explicit height, implicit width. Preserve aspect ratio.
             aspect_ratio = image.width / image.height
             width = int(style.height * scale * aspect_ratio)
             height = int(style.height * scale)
             if style.flex:
-                width = at_least(width)
+                width = at_least(0)
         else:
             # Use the image's actual size.
             aspect_ratio = image.width / image.height
             width = int(image.width * scale)
             height = int(image.height * scale)
             if style.flex:
-                width = at_least(width)
-                height = at_least(height)
+                width = at_least(0)
+                height = at_least(0)
     else:
         # No image. Hinted size is 0.
         width = 0

core/tests/widgets/test_imageview.py

@@ -138,14 +138,14 @@ def test_set_image_none(app):
         (dict(style=Pack(width=37, height=42)), 37, 42, None),
         (dict(style=Pack(width=37, height=42), scale=2), 74, 84, None),
         # Intrinsic image size, flex widget
-        (dict(style=Pack(flex=1)), at_least(144), at_least(72), 2),
-        (dict(style=Pack(flex=1), scale=2), at_least(288), at_least(144), 2),
+        (dict(style=Pack(flex=1)), at_least(0), at_least(0), 2),
+        (dict(style=Pack(flex=1), scale=2), at_least(0), at_least(0), 2),
         # Fixed width, flex widget
-        (dict(style=Pack(width=150, flex=1)), 150, at_least(75), 2),
-        (dict(style=Pack(width=150, flex=1), scale=2), 300, at_least(150), 2),
+        (dict(style=Pack(width=150, flex=1)), 150, at_least(0), 2),
+        (dict(style=Pack(width=150, flex=1), scale=2), 300, at_least(0), 2),
         # Fixed height, flex widget
-        (dict(style=Pack(height=80, flex=1)), at_least(160), 80, 2),
-        (dict(style=Pack(height=80, flex=1), scale=2), at_least(320), 160, 2),
+        (dict(style=Pack(height=80, flex=1)), at_least(0), 80, 2),
+        (dict(style=Pack(height=80, flex=1), scale=2), at_least(0), 160, 2),
         # Explicit image size, flex widget
         (dict(style=Pack(width=37, height=42, flex=1)), 37, 42, None),
         (dict(style=Pack(width=37, height=42, flex=1), scale=2), 74, 84, None),

docs/reference/api/widgets/imageview.rst

@@ -68,11 +68,10 @@ Notes
 
 * If an ImageView is given a style of ``flex=1``, and doesn't have an explicit size set
   along its container's main axis, it will be allowed to expand and contract along that
-  axis.
+  axis, with the size determined by the flex allocation.
 
-  * If the cross axis size is unspecified, it will be determined by the image's aspect
-    ratio, with a minimum size in the main axis matching the size of the image in the
-    main axis.
+  * If the cross axis size is unspecified, it will be determined by applying the image's
+    aspect ratio to the size allocated on the main axis.
 
   * If the cross axis has an explicit size, the image will be scaled to fill the
     available space so that the entire image can be seen, while preserving its aspect

docs/reference/style/pack.rst

@@ -313,7 +313,7 @@ The mapping that can be used to establish the reference implementation is:
   the HTML reference document. The rendering area of the browser window becomes
   the view area that Pack will fill.
 
-* Images map to ``<img>`` elements. The ``<img>`` element has an additional style of
+* ImageViews map to ``<img>`` elements. The ``<img>`` element has an additional style of
   ``object-fit: contain`` unless *both* ``height`` and ``width`` are defined.
 
 * All other elements in the DOM tree are mapped to ``<div>`` elements.