根据内容CSS拉伸图像
如何使用 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>
但它不会根据内容拉伸......
How to stretch image according to it's content horizontally with 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>
But it don't stretch according to the content...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不明白这张图片，但似乎你正在尝试拉伸背景图像，如果不使用 CSS3 属性这是不可能的 背景大小。
无论如何，您可以将图像放入 html 中，应用
width:100%，其高度将自动调整大小。（并且
width:100%对于块元素来说是无用的）I dont't understand the picture but it seems you're trying to stretch a background-image, which is impossible without using CSS3 property background-size.
Anyway you can place your image in html appliying
width:100%, its height will automatically be resized.(And
width:100%is useless for block elements)