🔧 Change image limiting style

index.html

@@ -331,7 +331,26 @@
                 <p>
                     Images can be "limited", so that they never occupy too much screen real estate, especially if they're very tall.
                 </p>
-                <img class="image-limited" src="https://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/>
+                <div class="split">
+                    <section>
+                        <h3>
+                            Half
+                        </h3>
+                        <p>
+                            The following image has a limit of half the vertical viewport:
+                        </p>
+                        <img class="image-limit-half" src="https://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/>
+                    </section>
+                    <section>
+                        <h3>
+                            Quarter
+                        </h3>
+                        <p>
+                            The following image has a limit of a quarter of the vertical viewport:
+                        </p>
+                        <img class="image-limit-quarter" src="https://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/>
+                    </section>
+                </div>
             </section>
             <h2>
                 Formatting

src/rules/skeleton.less

@@ -226,9 +226,12 @@
         object-fit: contain;
     }
 
-    // Limit even further the size of an image based on the size of the screen
+    @{image-limit-half} {
-    @{image-limited} {
+        max-height: max(28.2vw, 50vh);
-        max-height: max(37.5vw, 66.6vh);
+    }
+
+    @{image-limit-quarter} {
+        max-height: max(14.1vw, 25vh);
     }
 
     /// ===== Forms =====

src/targets/paper.module.css

@@ -289,8 +289,11 @@
   margin-right: auto;
   object-fit: contain;
 }
-.bluelib .image-limited {
+.bluelib .image-limit-half {
-  max-height: max(37.5vw, 66.6vh);
+  max-height: max(28.2vw, 50vh);
+}
+.bluelib .image-limit-quarter {
+  max-height: max(14.1vw, 25vh);
 }
 .bluelib .form {
   display: grid;

src/targets/paper.root.css

@@ -375,9 +375,13 @@ body .image,
   margin-right: auto;
   object-fit: contain;
 }
-body .image-limited,
+body .image-limit-half,
-.bluelib .image-limited {
+.bluelib .image-limit-half {
-  max-height: max(37.5vw, 66.6vh);
+  max-height: max(28.2vw, 50vh);
+}
+body .image-limit-quarter,
+.bluelib .image-limit-quarter {
+  max-height: max(14.1vw, 25vh);
 }
 body form,
 .bluelib form,

src/targets/royalblue.module.css

@@ -289,8 +289,11 @@
   margin-right: auto;
   object-fit: contain;
 }
-.bluelib .image-limited {
+.bluelib .image-limit-half {
-  max-height: max(37.5vw, 66.6vh);
+  max-height: max(28.2vw, 50vh);
+}
+.bluelib .image-limit-quarter {
+  max-height: max(14.1vw, 25vh);
 }
 .bluelib .form {
   display: grid;

src/targets/royalblue.root.css

@@ -375,9 +375,13 @@ body .image,
   margin-right: auto;
   object-fit: contain;
 }
-body .image-limited,
+body .image-limit-half,
-.bluelib .image-limited {
+.bluelib .image-limit-half {
-  max-height: max(37.5vw, 66.6vh);
+  max-height: max(28.2vw, 50vh);
+}
+body .image-limit-quarter,
+.bluelib .image-limit-quarter {
+  max-height: max(14.1vw, 25vh);
 }
 body form,
 .bluelib form,

src/vars/module.less

@@ -22,7 +22,8 @@
 @separator-heavy: ~".separator-heavy";
 
 @image: ~"img, .image";
-@image-limited: ~".image-limited";
+@image-limit-half: ~".image-limit-half";
+@image-limit-quarter: ~".image-limit-quarter";
 
 @status-disabled: ~".status-disabled";
 @status-hoverable: ~".status-hoverable";

src/vars/root.less

@@ -22,7 +22,8 @@
 @separator-heavy: ~".separator-heavy";
 
 @image: ~"img, .image";
-@image-limited: ~".image-limited";
+@image-limit-half: ~".image-limit-half";
+@image-limit-quarter: ~".image-limit-quarter";
 
 @status-disabled: ~"[disabled], .status-disabled";
 @status-hoverable: ~"[title], .status-hoverable";