a/21571337/1636522

by wared

HTML

<div><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTbd9AHZ9DuMZr5s3yLo4MsyLPx1M0B_BURSrAFmKrgoDyxdG6A" /></div>
<div><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTXldz9XA7wuWCiwetRVYgiVUVuNFRhK8E0FmNH6iavOuio7mb9_g" /></div>
<div><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSlk3gZnCZExtx8vMg5ykXThHnVmk4SjFZpwYysmCiuBXxQFXQhmg" /></div>

CSS

div {
    float: left;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
    width: 200px;
    height: 150px;
    margin: 1em;
}
img {
    display: block;
    position: absolute;
}

/* Below styles are for debug purposes only,
 * uncomment javascript (line 11) to switch on debug mode.
 */

.debug {
    overflow: visible;
}
.debug:after {
    content: ' ';
    display: block;
    position: absolute;
    border: 1px solid red;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.debug img {
    border: 1px solid blue;
    margin: -2px 0 0 -2px;
}

JavaScript

var divs = document.getElementsByTagName('div'),
    i = -1, 
    div, img;
while (++i < divs.length) {
    div = divs[i];
    img = div.firstChild;
    img.style.left = (div.offsetWidth - img.offsetWidth) / 2 + 'px';
    img.style.top = (div.offsetHeight - img.offsetHeight) / 2 + 'px';
}
//i = -1; while (++i < divs.length) divs[i].setAttribute('class', 'debug');