Change Details

Both Minerva and Timeless set image CSS that looks like: ```lang=css .mw-body a > img, .mw-body .floatnone > img { height: auto !important; max-width: 100% !important; }``` (Minerva selects `.content a > img, .content noscript > img`.) This works great for most images, but if you have a structure like this: ```lang=html <div style="display: flex"> <div class="flexy-item">[[File:Example.jpg|40px]]</div> <div class="anotherflexy-item">...</div> </div> ``` The image gets very small at basically all resolutions rather than respecting its own width. Turning off `max-width: 100% !important;` fixes the problem. I've employed such a structure in multiple places, most recently https://en.wikipedia.org/wiki/Template:Checkuserblock-account (flex is so convenient for replacing presentation tables). Behavior occurs in Chromium Edge and Firefox, so I guess that means everyone's browser basically. (Aside: I don't entirely understand why the `!important`s are there, since the CSS will always override the img width attribute anyway, and there's no way editor side to override it. Scared of some other CSS on the programming side???) In the particular context, I can't knock off the 100% with TemplateStyles (which would sometimes be available), so any other workarounds would be welcome.

Both Minerva and Timeless set image CSS that looks like: ```lang=css .mw-body a > img, .mw-body .floatnone > img { height: auto !important; max-width: 100% !important; }``` (Minerva selects `.content a > img, .content noscript > img`.) This works great for most images, but if you have a structure like this: ```lang=html <div style="display: flex"> <div class="flexy-item">[[File:Example.jpg|40px]]</div> <div class="anotherflexy-item">...</div> </div> ``` The image gets very small at basically all resolutions rather than respecting its own width. Turning off `max-width: 100% !important;` fixes the problem. I've employed such a structure in multiple places, most recently https://en.wikipedia.org/wiki/Template:Checkuserblock-account (flex is so convenient for replacing presentation tables). {F34450608} Behavior occurs in Chromium Edge and Firefox, so I guess that means everyone's browser basically. (Aside: I don't entirely understand why the `!important`s are there, since the CSS will always override the img width attribute anyway, and there's no way editor side to override it. Scared of some other CSS on the programming side???) In the particular context, I can't knock off the 100% with TemplateStyles (which would sometimes be available), so any other workarounds would be welcome.

Both Minerva and Timeless set image CSS that looks like: ```lang=css .mw-body a > img, .mw-body .floatnone > img { height: auto !important; max-width: 100% !important; }``` (Minerva selects `.content a > img, .content noscript > img`.) This works great for most images, but if you have a structure like this: ```lang=html <div style="display: flex"> <div class="flexy-item">[[File:Example.jpg|40px]]</div> <div class="anotherflexy-item">...</div> </div> ``` The image gets very small at basically all resolutions rather than respecting its own width. Turning off `max-width: 100% !important;` fixes the problem. I've employed such a structure in multiple places, most recently https://en.wikipedia.org/wiki/Template:Checkuserblock-account (flex is so convenient for replacing presentation tables). {F34450608} Behavior occurs in Chromium Edge and Firefox, so I guess that means everyone's browser basically. (Aside: I don't entirely understand why the `!important`s are there, since the CSS will always override the img width attribute anyway, and there's no way editor side to override it. Scared of some other CSS on the programming side???) In the particular context, I can't knock off the 100% with TemplateStyles (which would sometimes be available), so any other workarounds would be welcome.