It appears to be a bug that needs addressing. The CSS 2.1 documentation states
for replaced elements with both width and height
computed as auto, use the algorithm under Minimum and maximum
widths above to find the used width and height. Then apply the
rules under "Computing heights and margins" above, using the
resulting width and height as if they were the computed values.
Within the Minimum and maximum widths algorithm, there is a case outlined:
- Constraint violation:
h > max-height
- Resolved Width:
max(max-height * w/h, min-width)
- Resolved Height:
max-height
Considering that min-width equals 0, the resolved width should be max-height * w/h.
It seems that Webkit is instead using w, indicating a bug in the implementation.
To work around this issue, you can utilize a common technique to force an aspect ratio.
html, body {
height: 100%;
margin: 0;
}
#wrapper {
position: relative;
display: inline-block; /* Shrink-to-fit width */
vertical-align: top;
height: 100%;
max-width: 100%;
overflow: hidden;
}
.ratio {
height: 100%;
vertical-align: top;
visibility: hidden;
}
.filler {
position: absolute;
max-height: 100%;
max-width: 100%;
background: silver;
max-height: 100%;
left: 0;
top: 0;
}
<div id="wrapper">
<img class="ratio" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mozilla.svg">
<img class="filler" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mozilla.svg">
</div>
However, please note that this effect will only be active upon initial page load. Resizing the window afterwards may cause it to malfunction. To resolve this, trigger a rerender using JavaScript:
window.addEventListener('resize', function() {
var el = document.getElementById('wrapper'),
parent = el.parentNode,
next = el.nextSibling;
parent.removeChild(el);
parent.insertBefore(el, next);
});
html, body {
height: 100%;
margin: 0;
}
#wrapper {
position: relative;
display: inline-block; /* Shrink-to-fit width */
vertical-align: top;
height: 100%;
max-width: 100%;
overflow: hidden;
}
.ratio {
height: 100%;
vertical-align: top;
visibility: hidden;
}
.filler {
position: absolute;
max-height: 100%;
max-width: 100%;
background: silver;
max-height: 100%;
left: 0;
top: 0;
}
<div id="wrapper">
<img class="ratio" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mozilla.svg">
<img class="filler" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mozilla.svg">
</div>