Creo que este problema es común y lo resolví aquí en SO, pero no pude encontrar cómo resolverlo.

Problema:

Cuando cambie el tamaño de la ventana, notará que la altura de las dos imágenes diferirá en 1px a veces (eso se espera cuando el navegador ajusta las dimensiones).

¿Cómo 'soluciono' este problema de IU? Sé que puedo hacer eso usando unflexbox. Pero supongo que hay una mejor solución. ¿Podrían ustedes saltar?

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>

o incluso aquí cuando usodisplay: 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>

Editar: El problema no existe en el navegador Firefox pero existe en Chrome.

Tenga en cuenta que el problema no está presente cuando uso unflexbox:

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>

o usando flotadores y bloques en línea:

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>