<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%;
}