diff --git a/static/image.css b/static/image.css
index b995e85..80ce1b7 100644
--- a/static/image.css
+++ b/static/image.css
@@ -1,94 +1,99 @@
 .wd-image-positions--wrapper {
     /*
      * when the image is scaled up beyond the viewport size,
      * scroll only this wrapper so that the rest of the UI remains visible
      */
     overflow: auto;
-    max-height: 100vh;
+    /*
+     * limit the wrapper dimensions (width is effectively 100% but must be calculated absolutely),
+     * these variables are used in the img size calculations below
+     */
+    --padding: 15px; /* Bootstrap */
+    --wrapper-max-width: calc(100vw - 2 * var(--padding));
+    --wrapper-max-height: 100vh;
+    max-width: var(--wrapper-max-width);
+    max-height: var(--wrapper-max-height);
 }
 
 .wd-image-positions--image {
     /*
      * ensure that this element is the containing block of the inner .depicted elements,
      * so that their left/top/width/height percentage values apply to the size of this element
      */
     position: relative;
     /*
      * make this element only occupy the exact width and height of its descendants,
      * most likely the inner <img>, rather than occupying the full width of its container
      */
     display: inline-block;
     /*
      * fallback scale so the calculations of the image size don’t collapse to 0;
      * real scale set via the inputs selected below (without JS),
      * or via JS based on a range input
      */
     --scale: 1;
 }
 
 label > .wd-image-positions--scale {
     /*
      * make the JS version of this input look roughly okay relative to the label
      */
     vertical-align: middle;
 }
 
 .wd-image-positions--scale[value="1"]:checked ~ .wd-image-positions--wrapper > .wd-image-positions--image { --scale: 1; }
 .wd-image-positions--scale[value="2"]:checked ~ .wd-image-positions--wrapper > .wd-image-positions--image { --scale: 2; }
 .wd-image-positions--scale[value="3"]:checked ~ .wd-image-positions--wrapper > .wd-image-positions--image { --scale: 3; }
 .wd-image-positions--scale[value="4"]:checked ~ .wd-image-positions--wrapper > .wd-image-positions--image { --scale: 4; }
 .wd-image-positions--scale[value="5"]:checked ~ .wd-image-positions--wrapper > .wd-image-positions--image { --scale: 5; }
 
 .wd-image-positions--image .wd-image-positions--depicted {
     /* 
      * don’t show this element by default (unless the user hovers over the image, see below)
      */
     visibility: hidden;
 }
 
 .wd-image-positions--image:hover .wd-image-positions--depicted {
     /*
      * do show this element if the image is hovered
      */
     visibility: visible;
 }
 
 .wd-image-positions--image.wd-image-positions--active .wd-image-positions--depicted {
     /*
      * but not while the area for another depicted is being defined
      */
     visibility: hidden;
 }
 
 .wd-image-positions--image img {
     /*
-     * make the image at most as wide as its container
-     * (which we have to recalculate from 100vw - padding),
-     * and also at most as high as the viewport (100vh),
-     * both multiplied by the scale factor,
-     * and within those bounds at least as wide as its own width times the scale;
+     * make the image at most as wide and high as its wrapper,
+     * both multiplied by the scale factor (may overflow / scroll within the wrapper),
+     * and within those bounds at least as wide as its own width times the scale (magnify smaller images);
      * because min-width trumps max-width, the actual min-width value needs to repeat the max-width expression
      */
     /*
      * variables like the following are set in HTML, because attr() outside content is not widely supported:
      * --width: 123px; // attr(width px)
      * --height: 456px; // attr(height px)
      * --aspect-ratio: 123 / 456; // attr(width) / attr(height)
      */
-    --padding: 15px; /* Bootstrap, on the <main> */
-    --scaled-container-width: calc(100vw * var(--scale) - 2 * var(--padding));
-    --scaled-container-height: calc(100vh * var(--scale));
-    --max-width: min(var(--scaled-container-width), var(--scaled-container-height) * var(--aspect-ratio));
+    --scaled-wrapper-max-width: calc(var(--wrapper-max-width) * var(--scale));
+    --scaled-wrapper-max-height: calc(var(--wrapper-max-height) * var(--scale));
+    --max-width: min(var(--scaled-wrapper-max-width), var(--scaled-wrapper-max-height) * var(--aspect-ratio));
     --scaled-image-width: calc(var(--width) * var(--scale));
     --min-width: var(--scaled-image-width);
     max-width: var(--max-width);
     min-width: min(var(--min-width), var(--max-width));
     height: auto; /* browser picks correct aspect ratio based on width and height */
 }
 
 .wd-image-positions--wrapper.wd-image-positions--active ~ * button:not(.wd-image-positions--active) {
     /*
      * hide other buttons when defining a new depicted
      */
     display: none;
 }