Resize images with Circle

by Julian

HTML

<div><img src="https://source.unsplash.com/300x300/?bikini" /></div>
<div><img src="https://source.unsplash.com/500x500/?bikini" /></div>
<div><img src="https://source.unsplash.com/100x200/?bikini" /></div>
<div><img src="https://source.unsplash.com/400x800/?bikini" /></div>
<div><img src="http://placehold.it/60x80" /></div>
<div><img src="http://placehold.it/150x150" /></div>
<div><img src="http://placehold.it/180x120" /></div>
<div><img src="http://placehold.it/120x180" /></div>
<div><img src="http://placehold.it/20x30" /></div>

CSS

div {
    height: 100px;
    width: 100px;
    float: left;
    overflow: hidden;
    margin: 1px;
    position: relative;
    border-radius: 50%;
    
}
img {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0; 
    
    
}

JavaScript

onload = function(){
    for (var i = 0; i < document.images.length; i++) {
        centerImage(document.images[i]);
    }
};

function centerImage(img) {
    var container = img.parentNode;
    img.style.top = ((container.offsetHeight - img.offsetHeight) / 2) + "px";
    img.style.left = ((container.offsetWidth - img.offsetWidth) / 2) + "px";
}