Merge pull request #391 from bannergress/372-banner-image-alignment-f…

…or-small-banners

fix: center banner position on banner detail page

src/components/banner-card/banner-card.less

@@ -142,15 +142,16 @@
   }
 }
 
-.banner-card-picture-container{
+.banner-card-picture-container {
   position: relative;
   display: flex;
+  justify-content: center;
 
   @media only @mobile-l-detection {
     height: 200px;
   }
 
-  .offline-overlay{
+  .offline-overlay {
     font-size: 24px;
     line-height: 18px;
     color: var(--color-light-gray);
@@ -176,9 +177,9 @@
       flex-direction: row;
       background-color: rgba(0, 0, 0, 0.7);
 
-      svg{
+      svg {
         height: 1em;
-        width:1em;
+        width: 1em;
         fill: currentColor;
         margin-right: 0.5em;
       }
@@ -205,20 +206,29 @@
       fill: currentColor;
     }
   }
-}
 
-.banner-info-item.warning {
-  color: var(--color-blacklist);
+  &.warning {
+    color: var(--color-blacklist);
+  }
 }
 
-
 .banner-card-picture {
   margin: 20px 0;
   display: flex;
   max-width: 100%;
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  width: 100%;
+
+  @supports (aspect-ratio: 1/1) {
+    aspect-ratio: 2 / 1;
+  }
+
+  @supports not (aspect-ratio: 1/1) {
+    height: 160px; // 160 Pixel is half of width of .banner-card minus padding
+  }
+
   @media only @mobile-detection {
     height: auto;
     aspect-ratio: 2;
@@ -240,7 +250,7 @@
   max-height: 100%;
   max-width: 100%;
 
-  &>img {
+  & > img {
     max-width: 100%;
   }
 
@@ -282,21 +292,6 @@
   }
 }
 
-// Support for browsers that don't support aspect-ratio yet.
-// Can be removed once this feature is implemented in all major browsers
-
-@supports (aspect-ratio: 1/1) {
-  .banner-card-picture {
-    aspect-ratio: 2 / 1;
-  }
-}
-
-@supports not (aspect-ratio: 1/1) {
-  .banner-card-picture {
-    height: 160px; // 160 Pixel is half of width of .banner-card minus padding
-  }
-}
-
 .banner-card-title,
 .banner-info-item {
   text-overflow: ellipsis;