I've come across a common issue here on SO, but I'm struggling to find a solution.
Problem:
When resizing the window, sometimes the height of two images differ by 1px (expected behavior when the browser adjusts dimensions).
How can I address this UI issue? I know using a flexbox is an option, but I believe there might be a better solution. Any suggestions?
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>Alternatively, when utilizing 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>Edit: The issue doesn't occur in Firefox but does in Chrome.
Note that using a flexbox eliminates the issue:
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>Or you can use floats and 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>