我是网页设计的新手，我正在为一个餐厅创建一个网站并制作了我的模型，但我遇到了问题(或者可能不可能)像我在模型中那样显示我的图像(图片如下)
这是我的模型的顶部
我想要 100% 的标题(想通了) 图片 100% 宽度
图像为 1480x808 使用此代码，它保持 100% 宽度，但高度与我的下一部分不匹配(它要么将它完全推离页面，要么在其他分辨率下它与下一部分之间有一个很大的白色间隙)
有人能给我指出正确的方向吗？
非常感谢
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header {
height: 100px;
background-image: url(_images/headerpattern.jpg);
background-repeat: repeat;
}
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
}
#redbar {
height: 10px;
width: 100%;
background-color: #94201f;
}
#slogan {
height: 207px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainpicture"><img src="_images/mainpic.jpg" alt="" width="100%"/></div>
<div id="redbar"></div>
<div id="slogan">Content for id "slogan" Goes Here</div>
<div id="redbar"></div>
</div>
</body>
</html>最佳答案
尝试从#mainpicture 中删除 height 和 max-height 属性
更新
对于红色条，我将从您的标记中删除它们，并在第一张图片上使用 border-bottom，在第二张图片上使用 border-bottom
这是一个 fiddle
关于html - 100% 图像宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27374888/