画像メインの１カラムのリキッドデザインができません
画像をメインにした１カラムのリキッドデザインを作成したいのですが、画像の縦横比が崩れて縦長になりながら可変してしまいます。どのようにcssを設定したらよろしいでしょうか？いろいろ検索したりしましたが、うまくできません。
また、こちらの質問機能じたい初めてさせていただいています。至らないことがあるかもしれませんが、ぜひともよろしくお願い致します。急ぎで解決したいです。＾＾；
----------------
<html>
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=0.5,user-scalable=yes,initial-scale=1.0"/>
<link rel="stylesheet" href="css/a3.css" type="text/css" >
<title></title>
</head>
<body>
<div id="wall" >
<div id="box">
<img src="css/images/main.jpg">
</div>
</div>
<div id="footer"><img src="css/images/foot.jpg"></div>
</body>
---------------------------
body{
width:100%;
height:100px;
max-height:720px;
}
#wall{
display:block;
width:100%;
height:100%;
margin:0 auto;
min-width:720px;
min-height:325px;
max-width:1440px;
max-height:650px;
background-image:url(images/G1.jpg);
background-size: 100% 100%;
}
#box{
width:100%;
height:100%;
min-width:720px;
min-height:325px;
max-width:1440px;
max-height:650px;
}
#footer {
width:100%;
margin:0 auto;
min-width:720px;
min-height:35px;
max-width:1440px;
max-height:70px;
}
