MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 703: / Line 703: @@
 }
-.mainpage-wrapper .main-banner {
+/* The banner box */
-	color: var(--color-emphasized);
+.main-banner {
+    position: relative;
+    height: 450px;                 /* your image height */
+    overflow: hidden;              /* crop left & right */
+    padding: 0;
+    margin: 1em;
      background-color: var(--color-surface-2);
      border: var(--border-width-base) solid var(--border-color-base);
-    overflow: hidden;
      border-radius: var(--border-radius-large);
-     padding: 0em;
+     color: var(--color-emphasized);
-     margin: 1em;
+}
-     background-position: center center;
+/* Make MW wrappers fill the box */
+.main-banner .mw-default-size,
+.main-banner .mw-default-size > span {
+     display: block;
+     height: 100%;
+}
+/* Centre the image and ignore MW’s responsive max-width */
+.main-banner img.mw-file-element {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);   /* centres horizontally */
+    height: 100%;                   /* keep full banner height */
+    width: auto;                    /* maintain aspect ratio */
+    max-width: none;                /* override skin’s max-width:100% */
 }
+/* If the image is ever wrapped in a link, keep it filling */
+.main-banner a { display:block; height:100%; }
 .mainpage-wrapper .lower-row {