<style>
    img      { margin-top: 10px;}
    .control { width: 50%; }
    .pixels  { width: calc(100px); }
    .percent { width: calc(50%); }
    .both    { width: calc(25% + 50px); }
</style>

The images below must appear identical.
<div style="width:200px;">
    <img class="control" src="./resources/colorsquare.png">
    <img class="pixels"  src="./resources/colorsquare.png">
    <img class="percent" src="./resources/colorsquare.png">
    <img class="both"    src="./resources/colorsquare.png">
</div>