-1
CSSでコンテンツを水平に伸ばす方法。 
内容に応じた伸縮画像
//html code
<style>
html, body{
margin: 0;
padding: 0;
}
#cont {
width:100%;
height:125px;
background-color:#1ea1de;
}
.logo {
height:100px;
width:300px;
background: url(logo3.png) no-repeat;
margin-top:-105px;
}
#liniq {
height:2.5px;
width:100%;
background-color: #b5babc;
margin-top:5px;
}
#levo {
background: url(levo.gif) no-repeat;
width:64px;
height:104px;
margin-left:280px;
margin-top:-170px;
}
#middle {
background:url(middle.gif) repeat-x;
height:41px;
margin-top:-62px;
margin-left:321px;
border:1px solid red;
overflow:hidden;
}
</style>
</head>
<body>
<div id="cont"></div>
<div class="logo"></div>
<div id="liniq"></div>
<div id="buttons">
<div id="levo"></div>
<div id="middle"></div>
</div>
</body>
</html>
しかし、それは...内容に応じて、私は絵を理解dont't