html - 1px calculation issue with browsers (sub-pixel problems)

Question

I think this issue is common and picked it up here in SO itself, but could not find how to solve this.

Problem:

When you resize the window, you will notice that the height of the two images will differ by 1px at times (that is expected when browser adjusts the dimesions).

How do I 'fix' this UI issue? I know I can do that by using a flexbox. But I guess there is a better solution. Could you guys jump in?

table{
  width:100%;
  border-collapse: collapse;
}
img{
  display: block;
  width: 100%;
}

<table>
  <tr>
    <td><img src="http://placehold.it/100x100"/></td>
    <td><img src="http://placehold.it/100x100"/></td>
  </tr>
</table>

Answer 1

That's because of Sub-Pixel Problems.

Each image takes 50% of the container. For example, if the container is 100px wide, each image will be 50px wide.

But the width of container could be an odd number of pixels, e.g. 101px. Then there are three reasonable possibilities:

• Make one image 50px wide and the other 51px. Then the images won't be equally wide, even if you specified the same width to both of them.
• Make both images 50px wide. Then there will be a 1px gap
• Make both images 51px wide. Then they won't fit, overflowing the container or wrapping to the next line.

Each choice has its downsides, but nowadays browsers seem to prefer the first option. However, in this case, the images have an intrinsic aspect ratio, so different widths will produce different heights, and then the 1px gap is created horizontally instead of vertically.

It seems Firefox detects than, and thus makes the smaller image as tall as the other one, breaking the aspect ratio. Chrome prefers to enforce the aspect ratio.

There is no way to change this. It's completely implementation dependent:

The especially strange part, in all of this, is that there’s really no right, or wrong, here. How this behavior is supposed to play out by the rendering engine isn’t dictated by the CSS specification, having it be left up to the implementation to render as it sees fit.