✨ Add .image, .image-limited, .image-free (#15)

index.html

@@ -31,7 +31,7 @@
             <p>
                 To see how something is done, <kbd>Right Click</kbd> on it and then press <kbd>Inspect Element</kbd>.
             </p>
-            <img src="https://i.imgur.com/M8sFJeO.png" alt="How to Inspect Element">
+            <img class="image-limited" src="https://i.imgur.com/M8sFJeO.png" alt="How to Inspect Element">
         </section>
         <h2>
             Panels

src/rules/skeleton.less

@@ -88,6 +88,28 @@
         }
     }
 
+    // --- Images ---
+
+    @{image} {
+        display: block;
+
+        max-width: 100%;
+
+        margin-left: auto;
+        margin-right: auto;
+
+        object-fit: contain;
+    }
+
+    @{image-free} {
+        max-width: unset;
+        max-height: unset;
+    }
+
+    @{image-limited} {
+        max-height: max(37.5vw, 66.6vh);
+    }
+
     // --- Forms ---
 
     @{form} {

src/targets/paper.module.css

@@ -199,6 +199,20 @@
 .bluelib .panel-split > .panel {
   margin: 0;
 }
+.bluelib .image {
+  display: block;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  object-fit: contain;
+}
+.bluelib .image-free {
+  max-width: unset;
+  max-height: unset;
+}
+.bluelib .image-limited {
+  max-height: max(37.5vw, 66.6vh);
+}
 .bluelib .form {
   display: grid;
   align-items: center;

src/targets/paper.root.css

@@ -792,6 +792,25 @@ body .panel-split aside,
 body .panel-split .panel-split {
   margin: 0;
 }
+.base-skeleton img,
+body img,
+.base-skeleton .image,
+body .image {
+  display: block;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  object-fit: contain;
+}
+.base-skeleton .image-free,
+body .image-free {
+  max-width: unset;
+  max-height: unset;
+}
+.base-skeleton .image-limited,
+body .image-limited {
+  max-height: max(37.5vw, 66.6vh);
+}
 .base-skeleton form,
 body form,
 .base-skeleton .form,

src/targets/royalblue.module.css

@@ -199,6 +199,20 @@
 .bluelib .panel-split > .panel {
   margin: 0;
 }
+.bluelib .image {
+  display: block;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  object-fit: contain;
+}
+.bluelib .image-free {
+  max-width: unset;
+  max-height: unset;
+}
+.bluelib .image-limited {
+  max-height: max(37.5vw, 66.6vh);
+}
 .bluelib .form {
   display: grid;
   align-items: center;

src/targets/royalblue.root.css

@@ -792,6 +792,25 @@ body .panel-split aside,
 body .panel-split .panel-split {
   margin: 0;
 }
+.base-skeleton img,
+body img,
+.base-skeleton .image,
+body .image {
+  display: block;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  object-fit: contain;
+}
+.base-skeleton .image-free,
+body .image-free {
+  max-width: unset;
+  max-height: unset;
+}
+.base-skeleton .image-limited,
+body .image-limited {
+  max-height: max(37.5vw, 66.6vh);
+}
 .base-skeleton form,
 body form,
 .base-skeleton .form,

src/vars/module.less

@@ -9,6 +9,9 @@
 @status-disabled: ~".status-disabled";
 @status-hoverable: ~".status-hoverable";
 @status-clickable: ~".status-clickable";
+@image: ~".image";
+@image-free: ~".image-free";
+@image-limited: ~".image-limited";
 @form: ~".form";
 @form-label: ~".form-label";
 @form-field: ~".form-field";

src/vars/root.less

@@ -9,6 +9,9 @@
 @status-disabled: ~"[disabled], .status-disabled";
 @status-hoverable: ~"[title], .status-hoverable";
 @status-clickable: ~"[onclick], .status-clickable";
+@image: ~"img, .image";
+@image-free: ~".image-free";
+@image-limited: ~".image-limited";
 @form: ~"form, .form";
 @form-label: ~"form label, .form-label";
 @form-field: ~"form @{input-field}, .form-field";