Fix system image width with responsive container

neulab · Dec 6, 2024 · 7cb3b7b · 7cb3b7b
1 parent 121f147
commit 7cb3b7b
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css
@@ -200,18 +200,18 @@ pre {
 .sys-img {
   text-align: center;
   margin: 30px auto;
-  width: 70%;
-  height: 400px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  width: 100%;
+  max-width: 900px;
+  position: relative;
+  padding-bottom: 40%;
 }
 
 .sys-img img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   object-fit: contain;
 }