Html 100%图像宽度？

我是网页设计新手，我正在为一个班级创建一个餐厅网站，我制作了我的模型，但我有一个问题（或者可能是不可能的），我的图像显示，因为我在我的模型（图像跟随）

这是我的模型的顶部

我想要100%的标题（计算出来） 图像的宽度为100%

图像是1480x808 这段代码保持100%的宽度，但高度与我的下一节不匹配（它要么将其完全推离页面，要么在其他分辨率下，它与下一节之间有一个很大的白色间隙）

有人能给我指一下正确的方向吗

我会非常感激的

无标题文件
身体{
左边距：0px；
边际上限：0px；
右边距：0px；
边缘底部：0px；
}
#标题{
高度：100px；
背景图片：url（_images/headerpattern.jpg）；
背景重复：重复；
}
#主要图片{
高度：808px；
宽度：100%；
最大高度：808px；
左边距：自动；
右边距：自动；
}
#红条{
高度：10px；
宽度：100%；
背景色：#94201f；
}
#口号{
高度：207px；
宽度：100%；
}
id“标语”的内容在此处显示

尝试从#主图片中删除“高度”和“最大高度”属性

更新

对于红色条，我将从标记中删除它们，并在第一幅图像上使用

边框底部

，在第二幅图像上使用

边框底部

这里有一个

从主图片中删除高度。 或 如果需要高度，可以尝试将图像置于#mainpicture的背景中，并设置背景大小封面。将#mainpicture div留空

像

---

如果你想让你的页面响应，你必须有一些规则

您希望显示图像以及标语区域。但是页面可以在多种设备中看到，有多种尺寸

所以，你应该使用相对尺寸，这样你的目标可以通过许多设备实现

---

将图像放在一个具有相对尺寸的div中…

在一个不相关的注释上，尝试使用#main picture img{width:100%；}而不是内联css。当你继续往下看的时候，它会让你的代码看起来更干净。同样在html5中，宽度属性应该是以像素为单位的，所以这将是一个无效的值（如果你使用html5）。谢谢你的提示，我知道清理我的代码是我需要解决的问题。我想这就是我想要的！非常感谢。然而，由于某种原因，现在我的“红条”div没有出现。这是我的意思（我使用Dreamweaver btw）的图片，你能把它放在JSFIDLE中吗？当然，我会试试。以前从未听说过JSFIDLE，但现在好了，我再次更新了它。我在第二个红条下添加了一个div，现在它们出现了，但是在顶部有一个小的边距，我不确定这是从哪里来的<代码>背景尺寸：封面是这里的选择。

<div id="mainpicture"></div>

#mainpicture {
    height: 808px;
    width: 100%;
    max-height: 808px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(_images/mainpic.jpg);
    background-position:center top;
    background-size:cover;
}