Fix dapp logo showcase (#2478)

* Fix dapp logo showcase * Do not rely on `left` to scale down the image
dfinity · May 21, 2024 · 2ae0695 · 2ae0695
1 parent c31e8e1
commit 2ae0695
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/frontend/src/flows/dappsExplorer/teaser.ts b/src/frontend/src/flows/dappsExplorer/teaser.ts
@@ -75,7 +75,9 @@ const marqueeList = (dapps: KnownDapp[]): TemplateResult => {
         // shows an empty space where the image suddenly pops seconds
         // later.
         ({ logoSrc, name }) => html`<div class="c-marquee__item">
-          <img src=${logoSrc} alt="${name}" class="c-marquee__image" />
+          <div class="c-marquee__image-container">
+            <img src=${logoSrc} alt="${name}" class="c-marquee__image" />
+          </div>
         </div>`
       );
 

diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
@@ -3029,17 +3029,18 @@ input[type="checkbox"] {
   user-select: none;
 }
 
-.c-marquee__image {
+.c-marquee__image-container {
   position: absolute;
   top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(0, -50%);
   height: 65%;
-  /*
-    remove the max-width set by the reset, so that the image can be as wide as
-    as required by the height
-  */
-  max-width: unset;
+  aspect-ratio: 1;
+}
+
+.c-marquee__image {
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
 }
 
 @keyframes marquee {