This description is still a WIP, ignore it for now.
In T169975#4176954, we established that, since dimensions aren't applied to the wrapper (figure/span) and are instead on the media (img/video/audio/span), browsers won't respect them for certain elements (audio/span).
T133673 also points out that for <audio> there's another issue in that audio has no inherent height so with the default width, the 32px height placed on the element is arbitrary. It tries to account for that with a class mw-default-audio-height that clients can override. Nevermind the fact that browsers will just ignore the dimensions placed on the audio element to begin with and use whatever defaults they have for audio elements.
We end up with something like the following for audio,
<span class="mw-default-size mw-default-audio-height" typeof="mw:Audio"><span><audio ... height="32" width="220"> ... </audio></span></span>
Broken media are slightly different. If no dimensions are specified in wikitext,
<span class="mw-default-size" typeof="mw:Image"><span><span ...> ... </span></span></span>
However, thumbs are little trickier. They seem to ignore the default thumb size and choose 180 I11fc7fc955656eee2a78461b509c3fee555e8613
Unlike for audio, for spans, the sanitizer doesn't allow these dimension attributes (which'll just be ignored) and we end up using data- attributes instead.
Include some client side js like the following,
mw.loader.using( [ 'mediawiki.api' ], function() { var thumbLimits = mw.config.get( 'wgThumbLimits' ); var defaultWidth = thumbLimits ? thumbLimits[0] : 180; document.querySelectorAll( '[typeof~="mw:Error"][typeof*="mw:Image"]' ).forEach( function( m ) { var isDefault = m.classList.contains( 'mw-default-size' ); var span = m.firstChild.firstChild; var width = var height = span.getAttribute( 'data-height' ); if ( isDefault ) { span.style.width = defaultWidth + "px"; } else { span.style.width = span.getAttribute( 'data-width' ); span.style.height = span.getAttribute( 'data-height' ); } }); } );