Square up images

by mynameisdonald

HTML

<div>
    <img src="http://lorempixel.com/500/200" />
</div>
<div>
    <img src="http://lorempixel.com/200/500" />
</div>

CSS

div
{
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
img {
    position:absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}