JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="page">
    <div class="row">
        <div class="col span-8">
    
            <article>
                <figure class="image-span-4" data-ratio="16:9" data-src="http://www.dr.dk/drfront/images//2012/06/19/c=249,107,3503,2085;w=620;16165.jpg">
                    <noscript><img src="http://www.dr.dk/drfront/images//2012/06/19/c=249,107,3503,2085;w=620;16165.jpg" width="620" height="369"/></noscript>
                </figure>
            </article>
        
        </div>
        <div class="col span-4">
    
            <article>
                <figure class="image-span-1" data-ratio="16:9" data-src="http://www.dr.dk/drfront/images//2012/06/19/c=117,92,854,504;w=620;16254.jpg">
                    <noscript><img src="http://www.dr.dk/drfront/images//2012/06/19/c=117,92,854,504;w=620;16254.jpg" width="620" height="369"/></noscript>
                </figure>
            </article>
        
        </div>
    </div>
</div>

CSS

.page {
    width: 960px;
    margin: 0 auto;
}

.row {
min-height: 10px;
overflow: auto;        
}

.col {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    float: left;
    width: 100%;
}

.col.span-8 {
    width: 66.6666666666%;
}

.col.span-6 {
    width: 50%;
}

.col.span-4 {
    width: 33.3333333333%;
}

.col.span-3 {
    width: 25%;
}

article {
    width: 100%;
    overflow: auto;
    background-color: #EEE;
} 

article figure {
    margin: 0;
    float: left;
    width: 100%;
    padding-bottom: 28.125%;
    background-color: red;
    position: relative;
}

article figure > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} 

figure.image-span-3[data-ratio="16:9"],
.span-8 figure.image-span-2[data-ratio="16:9"],
.span-4 figure.image-span-1[data-ratio="16:9"] { 
    width: 25%;    
    padding-bottom: 14.0625%;
}

.span-12 figure.image-span-6[data-ratio="16:9"],
.span-8 figure.image-span-4[data-ratio="16:9"],
.span-6 figure.image-span-3[data-ratio="16:9"],
.span-4 figure.image-span-2[data-ratio="16:9"]{
    width: 50%;    
    padding-bottom: 28.125%;
}

.span-12 figure.image-span-6[data-ratio="4:3"],
.span-8 figure.image-span-4[data-ratio="4:3"],
.span-6 figure.image-span-3[data-ratio="4:3"],
.span-4 figure.image-span-2[data-ratio="4:3"] {
    width: 50%;
    padding-bottom: 37.5%;
}

JavaScript

var figures = document.querySelectorAll("figure[data-src]"),
    l = figures.length;

for (var i = 0; i < l; i++) {
    (function (figure) {
        var img = document.createElement("img");
        img.onload = function () {
            figure.appendChild(img);    
        };
        img.src = figure.getAttribute("data-src");
        figure.removeAttribute("data-src");
    } (figures[i]));
}