Fixed aspect ratio element

by Neviton

HTML

<div id="container">
    <div class="ratio p1x1 red">
        <input type="button" id="stopButton" value="STOP THE DAMN ANIMATION" />
    </div>
    
    <div class="ratio p1x1 blue">
        <img src="http://www.nativeskatestore.co.uk/images/blind-skateboards-blind-cody-mcentire-dip-skateboard-deck-8-0-p14483-32798_zoom.jpg" alt="" />
    </div>
    
    <div class="ratio p2x1 green">
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga nam rerum nulla commodi porro ducimus quo modi quasi explicabo sint reiciendis soluta unde facilis neque quaerat ipsam labore qui iste!</span>
    </div>
    
    <div class="ratio p1x2 blue">
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga nam rerum nulla commodi porro ducimus quo modi quasi explicabo sint reiciendis soluta unde facilis neque quaerat ipsam labore qui iste!</span>
    </div>
</div>

CSS

div {
    font: Bold 14px Arial;
    color: #fff;
}
 input {
     width: 90%;
    height: 90%;
 }
#container {
    width: 75%;
    text-align: center;
    margin: auto;
}

.ratio {
    position: relative;
    float: left;
    overflow: hidden;
}

.ratio.p1x1 {
    width: 20%;
    padding-top: 20%;
}

.ratio.p2x1 {
    width: 40%;
    padding-top: 20%;
}

.ratio.p1x2 {
    width: 20%;
    padding-top: 40%;
}

.ratio > * {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
}

.red { background-color: #f00;}
.green{ background-color: #0f0;}
.blue{ background-color: #00f;}

JavaScript

var container = document.getElementById('container'),
    stopButton = document.getElementById('stopButton'),
    step = 1,
    width = 75,
    intervalId = null;

stopButton.value = "STOP\n THE DAMN\n ANIMATION";

stopButton.onclick = function() {
    if (intervalId) {
        clearInterval(intervalId);
        intervalId = null;
        stopButton.value = "START\n THE\n ANIMATION";
    } else {
        intervalId = setInterval(animate, 50);
        stopButton.value = "STOP\n THE DAMN\n ANIMATION";
    }
};

function animate(){
    if (width <= 50 || width >= 100 ) {
        step = -step;
    }
   
    width += step;
    
    container.style.width = width + '%';
};

stopButton.onclick();