Проблема вычисления 1px с браузерами (проблемы с субпикселями)

Я думаю, что эта проблема является распространенной и поднял ее здесь в самой SO, но не мог найти, как решить эту проблему.

проблема:

При изменении размера окна вы заметите, что высота двух изображений будет иногда отличаться на 1 пиксель (что ожидается, когда браузер корректирует размеры).

Как мне исправить эту проблему с пользовательским интерфейсом? Я знаю, что могу сделать это, используяflexbox, Но я думаю, что есть лучшее решение. Не могли бы вы, ребята, прыгнуть?

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>

или даже здесь, когда я используюdisplay: table:

.wrapper{
  width:100%;
  display: table;
}
.wrapper div{
  display: table-cell;  
}
img{
  display: block;
  width: 100%;
}

<div class="wrapper">
    <div><img src="http://placehold.it/100x100"/></div>
    <div><img src="http://placehold.it/100x100"/></div>
</div>

редактировать: Проблема не существует в браузере Firefox, но существует в Chrome.

Обратите внимание, что проблема не существует, когда я используюflexbox:

body{
  margin: 0;  
}
.wrapper{
  width:100%;
  display: flex;
}
.wrapper div{
  flex: 1;  
}
img{
  display: block;
  width: 100%;
}

<div class="wrapper">
    <div><img src="http://placehold.it/100x100"/></div>
    <div><img src="http://placehold.it/100x100"/></div>
</div>

или используя float и inline-блоки:

body{
  margin: 0;  
}
.wrapper{
  width:100%;
  display: block;
}
.wrapper div{
  display: inline-block;
  float: left;
  width:50%;
}
.wrapper:after{
  content: '';
  display: inline-block;
  clear:both;
}
img{
  display: block;
  width: 100%;
}

<div class="wrapper">
    <div><img src="http://placehold.it/100x100"/></div>
    <div><img src="http://placehold.it/100x100"/></div>
</div>