<div class="wrap">
<p>①divの縦横比を固定してレスポンシブにする方法</p>
<div class="col">
<div class="box"></div>
<p>1:1</p>
</div>
<div class="col">
<div class="box-75"></div>
<p>3:4</p>
</div>
<div class="col">
<div class="box-gr"></div>
<p>黄金比 1:1.618</p>
</div>
<div class="col">
<div class="box-ws"></div>
<p>白銀比 1:√2 </p>
</div>
</div>
.box{
background-color:#ccc;
width: 100%;
height:0;
padding-top: 100%;
}
.box-75{
background-color:#ccc;
width: 100%;
height:0;
padding-top: 75%;
}
.box-gr{
background-color:#ccc;
width: 100%;
height:0;
padding-top: 61.8%;
}
.box-ws{
background-color:#ccc;
width: 100%;
height:0;
padding-top: 70.7%;
}
/* レイアウト用 */
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
img {
display:block;
vertical-align:bottom;
}
.wrap{
max-width:900px;
margin:auto;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.col{
width:25%;
padding:10px;
}
p{
width:100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.