MediaWiki:Common.css: Difference between revisions
Tag: Undo |
No edit summary |
||
Line 6: | Line 6: | ||
.mw-parser-output pre, .mw-parser-output code { | .mw-parser-output pre, .mw-parser-output code { | ||
white-space: pre-wrap; /* Preserve whitespace only for preformatted or code blocks */ | white-space: pre-wrap; /* Preserve whitespace only for preformatted or code blocks */ | ||
} | |||
/* For the welcome page cover image */ | |||
.welcome-cover-image-container { | |||
width: 100%; /* Make the container use the full available width of its parent */ | |||
margin-top: 1em; /* Optional: space above the image */ | |||
margin-bottom: 1em; /* Optional: space below the image */ | |||
overflow: hidden; /* Ensures the container itself doesn't cause overflow if image somehow exceeds it before scaling */ | |||
} | |||
.welcome-cover-image-container img { | |||
max-width: 100%; /* THIS IS KEY: Image will not be wider than its container */ | |||
height: auto; /* Maintain aspect ratio, preventing distortion */ | |||
display: block; /* Removes extra space below the image if it's treated as inline */ | |||
margin-left: auto; /* Optional: Centers the image if it's smaller than 100% max-width (e.g., on very wide screens) */ | |||
margin-right: auto; /* Optional: Centers the image */ | |||
} | } |
Revision as of 17:00, 20 May 2025
/* CSS placed here will be applied to all skins */ .mw-parser-output { white-space: normal; /* Default for standard paragraphs */ } .mw-parser-output pre, .mw-parser-output code { white-space: pre-wrap; /* Preserve whitespace only for preformatted or code blocks */ } /* For the welcome page cover image */ .welcome-cover-image-container { width: 100%; /* Make the container use the full available width of its parent */ margin-top: 1em; /* Optional: space above the image */ margin-bottom: 1em; /* Optional: space below the image */ overflow: hidden; /* Ensures the container itself doesn't cause overflow if image somehow exceeds it before scaling */ } .welcome-cover-image-container img { max-width: 100%; /* THIS IS KEY: Image will not be wider than its container */ height: auto; /* Maintain aspect ratio, preventing distortion */ display: block; /* Removes extra space below the image if it's treated as inline */ margin-left: auto; /* Optional: Centers the image if it's smaller than 100% max-width (e.g., on very wide screens) */ margin-right: auto; /* Optional: Centers the image */ }