MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 10: | Line 10: | ||
/* For the welcome page cover image */ | /* For the welcome page cover image */ | ||
. | .scaled-image-container { | ||
width: 100%; /* Make the container use the full available width of its parent */ | width: 100%; /* Make the container use the full available width of its parent */ | ||
margin-top: 1em; /* Optional: space above the image */ | margin-top: 1em; /* Optional: space above the image */ | ||
| Line 17: | Line 17: | ||
} | } | ||
. | .scaled-image-container img { | ||
max-width: 100%; /* THIS IS KEY: Image will not be wider than its container */ | max-width: 100%; /* THIS IS KEY: Image will not be wider than its container */ | ||
height: auto; /* Maintain aspect ratio, preventing distortion */ | height: auto; /* Maintain aspect ratio, preventing distortion */ | ||
Latest revision as of 16:02, 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 */
.scaled-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 */
}
.scaled-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 */
}