MediaWiki:Common.css: Difference between revisions
mNo edit summary Tags: Manual revert Reverted |
No edit summary |
||
| (3 intermediate revisions by 2 users not shown) | |||
| 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 */ | |||
.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 */ | |||
} | } | ||
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 */
}