2010-12-29 8 views
-1

CSSでコンテンツを水平に伸ばす方法。 alt text内容に応じた伸縮画像

//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

答えて

2

を伸ばしていないが、あなたが不可能である背景画像を、ストレッチしようとしているようですCSS3プロパティbackground-sizeを使用せずに

とにかく、画像をhtmlアプリケーションwidth:100%に配置することができます。高さは自動的に変更されます。

width:100%はブロック要素では役に立たない)

関連する問題