Html 无法增加图像大小以扩展到父级之外

我正在尝试创建我的网站，如下所示：

在这里，徽标图像与导航栏的网格重叠

我还使用CSS网格布局来创建导航栏，但是我在使图像扩展到边界之外时遇到了问题

这就是我目前拥有的：

基本上，我希望背景橙色图像（边框）在垂直方向上缩小，这样我就可以拥有与上面相同的设计

#主{
显示：网格；
高度：100vh；
网格模板柱：1fr 1fr 1fr 1.5fr；
网格模板行：0.02fr 0.2fr 0.1fr 0.25fr 0.45fr；
网格模板区域：
“导航导航”
“主标题主标题主标题主标题”
“副标题副标题副标题副标题”
“图标”
“图像内容”；
网格间距：0.2rem；
}
#导航栏{
边框顶部：1件纯黑；
}
#导航栏{
显示：内联块；
网格区域：导航；
背景：橙色；
边界半径：var（--主半径）；
填料顶部：var（--主填料）；
}
#导航杆img，标题，ul，li{
显示：内联块；
垂直对齐：中间对齐；
}
#导航条img{
边界半径：50%；
左边距：20px；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
/*显示：内联块*/
浮动：对；
边缘顶部：25px；
右边距：20px；
}
李{
显示：内联块；
填充：12px；
}
#主标题{
网格区域：主标题；
背景：黄色；
}
#副标题{
网格区域：小标题；
背景：粉红色；
}
#图标{
网格区域：图标；
背景：浅蓝色；
}
#图像{
网格区域：图像；
背景：橙色；
}
#内容{
网格区域：内容：
背景：棕色；
}
/*@仅介质屏幕和（最大宽度：600px）{
#主要{
网格模板列：1fr；
网格模板行：0.4fr 0.4fr 2.2fr 1.2 0.5；
网格模板区域：
“导航”
“侧边栏”
“主要”
“内容1”
“内容2”
“内容3”；
}
}*/

响应式J网
摄影艺术

摄影
历史
样品
关于

主标题
副标题
偶像
图像
目录

为了进行相同的设计，您需要将徽标img的位置更改为绝对位置，并留出一些空间放置徽标

#navbar img {
  border-radius: 50%;
  margin-left: 20px;
  top: -13px;
  position:absolute;
}

#主{
显示：网格；
高度：100vh；
网格模板柱：1fr 1fr 1fr 1.5fr；
网格模板行：0.02fr 0.2fr 0.1fr 0.25fr 0.45fr；
网格模板区域：
“导航导航”
“主标题主标题主标题主标题”
“副标题副标题副标题副标题”
“图标”
“图像内容”；
网格间距：0.2rem；
}
#导航栏{
边框顶部：1件纯黑；
}
#导航栏{
显示：内联块；
网格区域：导航；
背景：橙色；
边界半径：var（--主半径）；
填料顶部：var（--主填料）；
位置：相对位置；
}
#导航杆img，标题，ul，li{
显示：内联块；
垂直对齐：中间对齐；
}
#导航条img{
边界半径：50%；
左边距：20px；
顶部：-13px；
位置：绝对位置；
}
h3{
左边距：120像素；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
/*显示：内联块*/
浮动：对；
边缘顶部：25px；
右边距：20px；
}
李{
显示：内联块；
填充：12px；
}
#主标题{
网格区域：主标题；
背景：黄色；
}
#副标题{
网格区域：小标题；
背景：粉红色；
}
#图标{
网格区域：图标；
背景：浅蓝色；
}
#图像{
网格区域：图像；
背景：橙色；
}
#内容{
网格区域：内容：
背景：棕色；
}
/*@仅介质屏幕和（最大宽度：600px）{
#主要{
网格模板列：1fr；
网格模板行：0.4fr 0.4fr 2.2fr 1.2 0.5；
网格模板区域：
“导航”
“侧边栏”
“主要”
“内容1”
“内容2”
“内容3”；
}
}*/

响应式J网
摄影艺术

摄影
历史
样品
关于

主标题
副标题
偶像
图像
目录

成功了！非常感谢你！你能把我的答案标记为正确吗？