divの縦横比を維持する

harada 5,450views 更新:2014年5月26日

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

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません