Html 超过高度的图像的div标记

我想设计一个网站，有一个标志如下所示

有一个包含标题的div标记，但正如您所看到的，徽标高度超过了标题的高度。我提到的虚线显示了网站的主要部分。但是，标题颜色跨越并覆盖屏幕的宽度

我使用了“位置：相对”作为徽标，但是标题中的导航无法正确定位

如果你能帮我解决这个问题，我将不胜感激

代码如下：

HTML:

我会用这个。如果您的导航位于顶层，它可能会滑过欢迎横幅

将CSS标题中的这些属性更改为按比例更小，它将自动调整大小

width: (WW)px;
height: (HH)px;

---

由于您明确说明了图像的高度和宽度，因此需要确保该图像所进入的内容与高度匹配

将收割台容器高度更改为匹配或将徽标更改为匹配：

#header-container {
    background-color: #E1E1E1;
    height: 115px;
}

#header-logo {
    position: relative;
    width: 128px;
    height: 115px; /* To match the container */
    border: thin solid #E93538;
    background-color: #C92C2F;
    float: left;
}

#header-logo img{
   width: 100%; /*since you have only added dimensions to your container not the image itself, just to be sure.*/
}

编辑

---

假设你有一个这样的形象

您需要的是导航包装：

无重叠 我重新设计了您的CSS，因为我发现从头开始更容易：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
header{
    background-color: #3f3f3f;
    height: 80px;
}

.logo{
    background: red;
    width: 185px;
    float: left;
    height: 90px;

}
.header-wrap{
    width: 70%;
    margin: 0 15%;
    height:100%;
}

nav{
    height: 100%;
    float: left;
}

.wrapper{
    margin-top: 20px;
    width:80%;
    margin-left: 10%;
    margin-right: 10%;
}

HTML:

标志
导航
一些测试头
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢的人，必须为自己的行为负责

如果您想在实现它之前看到它的实际应用，请参阅以下JSFIDLE：

和网站一样有重叠 如果您想让徽标与内容略微重叠，则需要使用position absolute，然后在内容中添加页眉高度的边距，请参见此处：

标题{
背景色：#3f3f；
高度：80px；
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
}
.特色{
宽度：100%；
边缘顶部：80px；
}

fiddle就好了……我想你也可以创建一个新的div，包含标题和徽标？如果没有任何代码发布，很难帮助。你想实现什么行为？我想让徽标位于标题内，尽管其高度超过标题的高度。标题的高度为115px，但徽标图像的高度为188，我不希望它们的高度匹配。只要你看看这个网站，你就会知道我想要什么：什么网站？您没有提供任何网站或JSFIDLE。如果你不希望他们匹配，那么其中一个会超过另一个。这就像把一个较大的盒子放在一个较小的盒子里，并期望它适合。请填写一份JSFIDLE，我们可以为您提供更多帮助。从那里开始。我添加了一个包装器并调整了您的导航宽度（OriginalNavWidth-LogoWidth），我添加了*{box Size:border box；}这考虑到了您的边框和填充，因此所有内容都非常适合，更多信息：@Jezzabeanz对不起，网站是：www.mcgill.cap请查看我新添加的答案，它与您链接的网站类似。我希望这有帮助。

#header-container {
    background-color: #E1E1E1;
    height: 115px;
}

#header-logo {
    position: relative;
    width: 128px;
    height: 115px; /* To match the container */
    border: thin solid #E93538;
    background-color: #C92C2F;
    float: left;
}

#header-logo img{
   width: 100%; /*since you have only added dimensions to your container not the image itself, just to be sure.*/
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
header{
    background-color: #3f3f3f;
    height: 80px;
}

.logo{
    background: red;
    width: 185px;
    float: left;
    height: 90px;

}
.header-wrap{
    width: 70%;
    margin: 0 15%;
    height:100%;
}

nav{
    height: 100%;
    float: left;
}

.wrapper{
    margin-top: 20px;
    width:80%;
    margin-left: 10%;
    margin-right: 10%;
}

 <header>

    <div class="header-wrap">
    <div class="logo">Logo</div>
    <nav>
        nav
    </nav>
 </div>
 </header>

<div class="wrapper">
    <h1>Some test header</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

header{
    background-color: #3f3f3f;
    height: 80px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.featured{
    width:100%;
    margin-top: 80px;
}


<div class="featured">
        <img src="http://lorempixel.com/output/technics-q-c-1920-480-9.jpg">
    </div>