Force broken image to preserve hard-coded aspect ratio

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.)

score 0 · Accepted Answer · answered May 18 '18 at 04:18

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>

score 0 · Answer 2 · answered May 18 '18 at 06:54

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>

Force broken image to preserve hard-coded aspect ratio

2 Answers2