background-size and fluid width&height

by Alesei Narkevitch

HTML

<ul class="cont">
    <li class="box one">1</li>
    <li class="box two">2</li>
    <li class="box three">3</li>
    <li class="box four">4</li>
    <li class="box five">5</li>
    <li class="box six">6</li>
    <li class="box seven">7</li>
    <li class="box eight">8</li>
</ul>

CSS

.cont, .box {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}
.cont {
    width: 100%;
    overflow: auto;
    background: #cfcfcf;
    box-sizing: border-box;
}
.box {
    display: block;
    float: left;
    text-indent: -1000px;
    background-position: -100000px -100000px;
    background-repeat: no-repeat;
    height: 0;
    background-size: cover;
    border: 1px solid #000;
}
@media screen and ( min-width: 400px ) {
    .box {
        width: 100%;
        padding-bottom: 50%;
    }
}
@media screen and ( min-width: 800px ) {
    .box {
        width: 12.5%;
        padding-bottom: 5%;
    }
}
.one {
    background-position: 50% 19.5%;
}
.two {
    background-position: 50% 26%;
}
.three {
    background-position: 50% 33%;
}
.four {
    background-position: 50% 39.5%;
}
.five {
    background-position: 50% 47.5%;
}
.six {
    background-position: 50% 54%;
}
.seven {
    background-position: 50% 61%;
}
.eight {
    background-position: 50% 67.5%;
}
.box {
    background-image:...