[AsciiDoc] Use object-contain on image blocks (#66)

* Use `object-contain` * Build
oxidecomputer · Feb 14, 2024 · fb58a77 · fb58a77
1 parent ac54c65
commit fb58a77
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/components/dist/asciidoc.css b/components/dist/asciidoc.css
@@ -40,11 +40,15 @@
     @apply normal-case;
   }
 
-  .asciidoc-body img {
-    @apply mx-auto h-auto w-auto w-full rounded-lg border border-tertiary;
+  .asciidoc-body .imageblock img {
+    @apply mx-auto h-auto w-auto w-full rounded-lg border border-tertiary object-contain;
     max-height: max(500px, 75vh);
   }
 
+  .asciidoc-body span img {
+    @apply inline;
+  }
+
   .asciidoc-body img.transparent-dark {
     @apply bg-secondary;
   }
@@ -704,11 +708,6 @@
       white-space: pre-wrap;
     }
 
-    .asciidoc-body img {
-      max-height: max(400px, 25vh);
-      margin-left: 0;
-    }
-
     h1 {
       font-size: 3rem !important;
       line-height: 1 !important;

diff --git a/components/src/assets/asciidoc.css b/components/src/assets/asciidoc.css
@@ -40,11 +40,15 @@
     @apply normal-case;
   }
 
-  .asciidoc-body img {
-    @apply mx-auto h-auto w-auto w-full rounded-lg border border-tertiary;
+  .asciidoc-body .imageblock img {
+    @apply mx-auto h-auto w-auto w-full rounded-lg border border-tertiary object-contain;
     max-height: max(500px, 75vh);
   }
 
+  .asciidoc-body span img {
+    @apply inline;
+  }
+
   .asciidoc-body img.transparent-dark {
     @apply bg-secondary;
   }
@@ -704,11 +708,6 @@
       white-space: pre-wrap;
     }
 
-    .asciidoc-body img {
-      max-height: max(400px, 25vh);
-      margin-left: 0;
-    }
-
     h1 {
       font-size: 3rem !important;
       line-height: 1 !important;