divの縦横比を維持する

ウィンドウサイズを変更してもdivの縦横比を維持する場合のcssです。
表示サンプルはこちら

CSS

div.div01 {　/*1：1*/
    width:24%;
    height:24vw;
    margin:0.5%;
    background:#d3381c;
    float:left;
}
div.div02 {　/*4：3*/
    width:20%;
    height:15vw;
    margin:0.5%;
    background:#d3381c;
    float:left;
}
div.div03 {　/*3：2*/
    width:15%;
    height:10vw;
    margin:0.5%;
    background:#d3381c;
    float:left;
}
div.div04 {　/*8：5*/
    width:18%;
    height:10vw;
    margin:0.5%;
    background:#d3381c;
    float:left;
}

HTML

<div class="div01">1:1</div>
<div class="div01">1:1</div>
<div class="div01">1:1</div>
<div class="div01">1:1</div>

<div class="div02">4:3</div>
<div class="div02">4:3</div>
<div class="div02">4:3</div>
<div class="div02">4:3</div>

<div class="div03">3:2</div>
<div class="div03">3:2</div>
<div class="div03">3:2</div>
<div class="div03">3:2</div>

<div class="div04">8:5</div>
<div class="div04">8:5</div>
<div class="div04">8:5</div>
<div class="div04">8:5</div>

参考：CSS: A way to maintain aspect ratio when resizing a DIV?