根据内容css拉伸图像_Css_Stretch

根据内容css拉伸图像

css

根据内容css拉伸图像,css,stretch,Css,Stretch,如何使用css根据图像内容水平拉伸图像。 //html代码 html，正文{ 保证金：0；填充：0； } #续{ 宽度：100%；高度：125px；背景色：#1ea1de； } .标志{ 高度：100px；宽度：300px；背景：url（logo3.png）不重复；边缘顶部：-105px； } #林尼克{ 高度：2.5px；宽度：100%；背景色：#b5babc；边缘顶部：5px； } #列沃{ 背景：url（levo.gif）不重复；宽度：64px；高度：104px；

如何使用css根据图像内容水平拉伸图像。

//html代码
html，正文{
保证金：0；
填充：0；
}
#续{
宽度：100%；
高度：125px；
背景色：#1ea1de；
}
.标志{
高度：100px；
宽度：300px；
背景：url（logo3.png）不重复；
边缘顶部：-105px；
}
#林尼克{
高度：2.5px；
宽度：100%；
背景色：#b5babc；
边缘顶部：5px；
}
#列沃{
背景：url（levo.gif）不重复；
宽度：64px；
高度：104px；
左边距：280px；
利润上限：-170px；
}
#中间的{
背景：url（middle.gif）repeat-x；
高度：41px；
利润上限：-62px；
左边距：321px；
边框：1px纯红；
溢出：隐藏；
}

但是它不会根据内容拉伸…

我不理解图片，但似乎您正在尝试拉伸背景图像，如果不使用CSS3属性，这是不可能的

不管怎样，您可以将图像放入html应用程序

宽度：100%

，其高度将自动调整大小

（并且

宽度：100%

对于块元素无效）

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