ウィンドウサイズを変更しても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>