support images

index.css

@@ -1,7 +1,7 @@
 :root {
   --font-family: "Fira Code", monospace;
   --line-height: 1.25rem;
-  --border-thickness: 1.5px;
+  --border-thickness: 1px;
   --bold-weight: 700;
 
   font-family: var(--font-family);
@@ -41,7 +41,7 @@ body {
   width: 100%;
   margin: 0;
   padding: var(--line-height) 2ch;
-  max-width: 80ch;
+  max-width: calc(min(80ch, round(down, 100%, 1ch)));
   line-height: var(--line-height);
 }
 
@@ -165,6 +165,23 @@ p {
   hyphens: auto;
 }
 
+img {
+  --real-height: 100% / var(--ratio);
+
+  display: block;
+  width: 100%;
+  padding-bottom: calc(
+    round(
+      down, 
+      var(--line-height) - (
+        var(--real-height) - round(down, var(--real-height), var(--line-height))
+      ),
+      1px
+    )
+  );
+  object-fit: contain;
+}
+
 pre, code {
   font-family: var(--font-family);
 }

index.js

@@ -0,0 +1,12 @@
+// Set the ratio variable on each image.
+document.querySelectorAll("img").forEach(img => {
+  function onLoaded() {
+    const ratio = img.naturalWidth / img.naturalHeight;
+    img.style.setProperty("--ratio", ratio);
+  }
+  if (img.loaded) {
+    onLoaded();
+  } else {
+    img.addEventListener("load", onLoaded);
+  }
+});

index.md

@@ -141,3 +141,7 @@ Let's go wild and draw a chart!
  0  └───▀─────────▀─────────▀──────────▀─────────────
       Socks     Jeans     Shirts   USB Drives
 </pre></figure>
+
+## Images
+
+![A room in an old French castle.](castle.jpg)

template.html

@@ -67,5 +67,6 @@ $for(include-after)$
 $include-after$
 $endfor$
   <div class="grid"></div>
+  <script src="index.js"></script>
 </body>
 </html>