i will make this image thing work

by Chris Ball

HTML

<ul class="row">
    <li class="outer taller">
        <img src="http://placehold.it/100?text=100x100" class="img"/>
    </li>
    <li class="outer wider">
        <img src="http://placehold.it/100?text=100x100" class="img"/>
    </li>
    <li class="outer exact">
        <img src="http://placehold.it/100?text=100x100" class="img"/>
    </li>
    <li class="outer shorter">
        <img src="http://placehold.it/100?text=100x100" class="img"/>
    </li>
    <li class="outer narrower">
        <img src="http://placehold.it/100?text=100x100" class="img"/>
    </li>
</ul>

<ul class="row">
    <li class="outer taller">
        <img src="http://placehold.it/100x80?text=100x80" class="img"/>
    </li>
    <li class="outer wider">
        <img src="http://placehold.it/100x80?text=100x80" class="img"/>
    </li>
    <li class="outer exact">
        <img src="http://placehold.it/100x80?text=100x80" class="img"/>
    </li>
    <li class="outer shorter">
        <img src="http://placehold.it/100x80?text=100x80" class="img"/>
    </li>
    <li class="outer narrower">
        <img src="http://placehold.it/100x80?text=100x80" class="img"/>
    </li>
</ul>

<ul class="row">
    <li class="outer taller">
        <img src="http://placehold.it/80x100?text=80x100" class="img"/>
    </li>
    <li class="outer wider">
        <img src="http://placehold.it/80x100?text=80x100" class="img"/>
    </li>
    <li class="outer exact">
        <img src="http://placehold.it/80x100?text=80x100" class="img"/>
    </li>
    <li class="outer shorter">
        <img src="http://placehold.it/80x100?text=80x100" class="img"/>
    </li>
    <li class="outer narrower">
        <img src="http://placehold.it/80x100?text=80x100" class="img"/>
    </li>
</ul>

SCSS

.row {
    list-style: none;
}
.outer {
    border: 1px solid red;
    display: inline-block;
    margin: 0 75px 75px 0;
    position: relative;
    vertical-align: middle;
    &.taller {
        height: 200px;
        width: 150px;
    }
    &.wider {
        height: 150px;
        width: 200px;
    }
    &.exact {
        height: 100px;
        width: 100px;
    }
    &.shorter {
        height: 25px;
        width: 50px;
    }
    &.narrower {
        height: 50px;
        width: 25px;
    }
}

.img {
    display: block;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}