ch denke, dieses Problem ist weit verbreitet und habe es hier in SO selbst aufgegriffen, konnte aber keine Lösung finde

Proble:

Wenn Sie die Größe des Fensters ändern, werden Sie feststellen, dass sich die Höhe der beiden Bilder gelegentlich um 1px unterscheidet (dies wird erwartet, wenn der Browser die Abmessungen anpasst).

Wie kann ich dieses UI-Problem beheben? Ich weiß, dass ich das mit einem @ tun kaflexbox. Aber ich denke, es gibt eine bessere Lösung. Könntet ihr reinspringen?

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>

oder auch hier, wenn ich @ benutdisplay: 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>

Bearbeite: Das Problem ist nicht in Firefox, sondern in Chrome vorhanden.

Bitte beachten Sie, dass das Problem nicht vorliegt, wenn ich ein @ verwendflexbox:

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>

oder mit floats und inline-blocks:

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>