グリッドデザインの画像表示について

webデザインについて質問です。

現在グッリドデザインを使ったレスポンシブデザインのwebサイトのデザインをしています。

コードは以下です

----html----
<div class="grid">
<ul>
<li class="grid1"></li>
<li class="grid2">b</li>
<li class="grid3">c</li>
<li class="grid4">d</li>
<li class="grid5">e</li>
</ul>
</div>



---css----
html,body,
ul,ol,li,
h1,h2,h3,h4,h5,h6,p,
form,input,div{
margin: 0;
padding: 0;
}

.grid{
width: 100%;
height: 670px;
background-color: aqua;
}
div.grid li{
display: block;
float: left;
list-style: none;
}
li.grid1{
width: 25%;
height: 670px;
background-color: beige;
}
li.grid2{
width: 48%;
height: 335px;
background-color: brown;
}
li.grid3{
width: 27%;
height: 335px;
background-color: chocolate;
}
li.grid4{
width: 27%;
height: 335px;
background-color: darkcyan;
}
li.grid5{
width: 48%;
height: 335px;
background-color: darkgray;
}
.grid ul:after{
content: "";
clear: both;
display: block;
}



こんな感じなのですが、グリッドの１つ１つに画像をbackground-imageで表示させた場合、サイトの横幅を変えたときに画像がうまく表示されません（repeat: no-repeat、size: cover;にして表示した場合、横幅を変えたときに画像の端が表示されます）

これをサイトの横幅を変えても画像の縦横の比率が変わらずに全体表示され続けるようにしたいです。

http://mosaic-theme-active.myshopify.com/

上記のサイトは横幅を変えても画像も全体表示されたままです。
私のコードではheightを指定してしまっているため、上記のサイトのようにheightが可変でサイトの横幅が変えられても画像の縦横の比率を維持できないのだとおもうのですが、どのように書けばいいかわかりません・・・。
他にも使用する画像の解像度や画像指定のプロパティなど間違っているところが色々あるとおもいますが、、、

とてもヘタクソな説明ですが、わかる方よろしくお願いしますm(_ _)m

No.2 回答者： t_fumiaki 回答日時： 2016/04/27 12:44

No.1です。

微妙に間違えた。以下が正解です。
gridの部分のみ記載。

.grid{
width: 100%;
height:100%;
background-color: aqua;
}
div.grid li{
display: block;
float: left;
list-style: none;

}

li.grid1{
width: 25%;

height:0;
padding-bottom:100%;
background-color: beige;
}
li.grid2{
width: 48%;
height:0;
padding-bottom:50%;
background-color: brown;
}
li.grid3{
width: 27%;
height:0;
padding-bottom:50%;
background-color: chocolate;
}
li.grid4{
width: 27%;
height:0;
padding-bottom:50%;
background-color: darkcyan;
}
li.grid5{
width: 48%;
height:0;
padding-bottom:50%;
background-color: darkgray;
}

No.1 回答者： t_fumiaki 回答日時： 2016/04/27 07:49

cssのgrid部分のみ記載

heightは全て削除。代わりにpadding-bottom:xx%; で調整する。
以下は例なのでxxを調整して下さい

.grid{
width: 100%;
background-color: aqua;
}
div.grid li{
display: block;
float: left;
list-style: none;
}
li.grid1{
width: 25%;
padding-bottom:103%;
background-color: beige;
}
li.grid2{
width: 48%;
padding-bottom:50%;
background-color: brown;
}
li.grid3{
width: 27%;
padding-bottom:50%;
background-color: chocolate;
}
li.grid4{
width: 27%;
padding-bottom:50%;
background-color: darkcyan;
}
li.grid5{
width: 48%;
padding-bottom:50%;
background-color: darkgray;
}