JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left">
    <img src="http://placehold.it/83x111" />
</div>

<div class="right">
    <img src="http://placehold.it/83x111" />
</div>

CSS

div {width:15%; margin-top: 5%; display: inline-block}

.left {float:left; margin-left:25%}
.right {float:right; margin-right: 25%}

img {border-radius: 100%; background-color: #ccc;}

JavaScript

var img = document.querySelector('img');
var padding = 0;

while(img.offsetWidth < img.offsetHeight){
    img.style.paddingLeft = (++padding)+"%";
    img.style.paddingRight = padding+"%";
}