<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>