Ratios 2

An example of how to apply several different ratios to one image.

by Matthew Day

HTML

<div class="wrap">
    <div class="ratio seven-to-three" style="background-image: url(http://www.sxc.hu/pic/l/s/so/soulbeauty/1424924_93907966.jpg)">
        <div class="text">7:3</div>
    </div>
    <div class="ratio sixteen-to-nine" style="background-image: url(http://www.sxc.hu/pic/l/s/so/soulbeauty/1424924_93907966.jpg)">
        <div class="text">16:9</div>
    </div>
    <div class="ratio eight-to-five" style="background-image: url(http://www.sxc.hu/pic/l/s/so/soulbeauty/1424924_93907966.jpg)">
        <div class="text">8:5</div>
    </div>
    <div class="ratio one-to-one" style="background-image: url(http://www.sxc.hu/pic/l/s/so/soulbeauty/1424924_93907966.jpg)">
        <div class="text">1:1</div>
    </div>
    <div class="ratio three-to-four" style="background-image: url(http://www.sxc.hu/pic/l/s/so/soulbeauty/1424924_93907966.jpg)">
        <div class="text">3:4</div>
    </div>
    <div class="ratio five-to-seven" style="background-image: url(http://www.sxc.hu/pic/l/s/so/soulbeauty/1424924_93907966.jpg)">
        <div class="text">5:7</div>
    </div>
    <div class="ratio two-to-three" style="background-image: url(http://www.sxc.hu/pic/l/s/so/soulbeauty/1424924_93907966.jpg)">
        <div class="text">2:3</div>
    </div>
</div>

CSS

* {
    box-sizing:border-box;
    margin: 0;
    padding; 0;
    font-family: 'Helvetica';
    font-size: 1.3em;
    text-align: center;
    color: white;
}

.wrap {
    height: 100%;
    width: 100%;
}

.ratio {
    position: relative;
    float: left;
    margin: 6px;
    width: 30%;
    height: 0;
    background-repeat: no repeat;
	background-position: center center;
	background-size: cover;
}

.one-to-one {
    padding-top: 30%;
}

.sixteen-to-nine {
    padding-top: 16.88%;
}

.five-to-seven {
    padding-top: 42%;
}

.eight-to-five {
    padding-top: 18.75%;
}

.seven-to-three {
    padding-top: 12.86%;
}

.three-to-four {
    padding-top: 40%;
}

.two-to-three {
    padding-top: 45%;
}

.text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}