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>
See Question&Answers more detail:os