Force broken image to preserve hard-coded aspect ratio - html

Question

I'm working on a responsive web page with images that may be larger than the max-width of a mobile browser screen. In the example below, I'm using an image from https://stackoverflow.com/company which is 975x573.
Consider this snippet.
img {
max-width: 100%;
height: auto;
}
<img height="573" width="975" src="https://cdn.sstatic.net/Sites/stackoverflow/company/Img/photos/big/1.jpg?v=17b956bfb68e">
<p>test</p>
<img height="573" width="975" src="https://stackoverflow.com/missing-image.png">
<p>test</p>
This sample includes two images, one that exists, and one that doesn't exist.
I want the image boxes for both images to be the same height, 100% width with the aspect ratio preserved.
Instead, the existing image is correctly resized with its aspect ratio preserved, but the broken image is 16x16, which (in my full site) makes my layout look weird.
How do I fix this example? (Pure CSS only, please.)

Answer 1

It doesn't seem to be possible to style broken images the way I want. The only workaround I can find is to use a wrapper div, force the div to maintain a fixed aspect ratio, and to force the image to fill its wrapper parent.
There are a bunch of techniques for doing that in the link above. Here's one, for example.
.wrapper {
max-width: 100%;
padding-bottom: 58.77%; /* 573/975 */
position: relative;
}
img {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
max-width: 100%;
max-height: 100%;
}
<div class="wrapper"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/Img/photos/big/1.jpg?v=17b956bfb68e"></div>
<p>test</p>
<div class="wrapper"><img src="https://stackoverflow.com/missing-image.png"></div>
<p>test</p>

Answer 2

Let me be clear, the "broken image" is just browsers rendered image to show you it is broken and you can not access to that "icon". So that, in some browser it is not be shown because some browsers not support.
The best solution to get the same result that you expected is using background image for your image element. Please check my codes snippet bellow:
You have to define the Aspect Ratio, in my codes I had defined the Aspect Ratio by division between height and width => 573/975.
More info: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
img {
width: 100%;
height: auto;
}
.img-cover {
background-image: url(http://via.placeholder.com/975x573);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding-top: 58.769%; /* Aspect Ratio from 573/975 */
position: relative; /* If you want text inside of it */
}
.inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div class="img-cover">
<div class="inner">
<img height="573" width="975" src="https://cdn.sstatic.net/Sites/stackoverflow/company/Img/photos/big/1.jpg?v=17b956bfb68e">
</div>
</div>
<p>test</p>
<div class="img-cover">
<div class="inner">
<img height="573" width="975" src="https://stackoverflow.com/missing-image.png">
</div>
</div>
<p>test</p>