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

Question

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

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

我还使用 CSS 网格布局来创建导航栏，但我无法将图像扩展到边框之外。

这是我目前拥有的：

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

#main {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  grid-template-rows: 0.02fr 0.2fr 0.1fr 0.25fr 0.45fr;
  grid-template-areas:
    "nav nav nav nav"
    "main-heading main-heading main-heading main-heading"
    "sub-heading sub-heading sub-heading sub-heading"
    "icons icons icons icons"
    "images images images contents";
  grid-gap: 0.2rem;
}
#navbar {
  border-top: 1px solid black;
}
#navbar {
  display: inline-block;
  grid-area: nav;
  background: orange;
  border-radius:var(--main-radius);
  padding-top: var(--main-padding);
}

#navbar img, header, ul, li {
  display: inline-block;
  vertical-align: middle;
}

#navbar img {
  border-radius: 50%;
  margin-left: 20px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*display: inline-block;*/
  float: right;
  margin-top: 25px;
  margin-right: 20px;
}

li {
  display: inline-block;
  padding: 12px;
}

#main-heading {
  grid-area: main-heading;
  background: yellow;
}

#sub-heading {
  grid-area: sub-heading;
  background: pink;
}

#icons {
  grid-area: icons;
  background: lightblue;
}

#images {
  grid-area: images;
  background: orange;
}

#contents {
  grid-area: contents:
    background: brown;
}
/*@media only screen and (max-width: 600px) {
  #main {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2 0.5;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "content1"
      "content2"
      "content3";
  }
}*/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive J Web</title>
  <link rel="stylesheet" href="Lab04.css">
</head>
<body>
  <div id = "main">
    <div id = "navbar">
      <img src="lens.jpg" alt=lens width=90px height=90px>
      <header>
        <h3>
          Art of Photography
        </h3>
      </header>
      <ul>
        <li>Photography</li>
        <li>History</li>
        <li>Samples</li>
        <li>About</li>
      </ul>
    </div>
    <div id = "main-heading">Main-heading</div>
    <div id = "sub-heading">Sub-heading</div>
    <div id = "icons">Icon</div>
    <div id = "images">Images</div>
    <div id ="contents">Contents</div>
  </div>
</body>
</html>

Answer 1

为了做同样的设计，需要把logo img的位置改成绝对的，给一些space来放logo。

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

#main {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  grid-template-rows: 0.02fr 0.2fr 0.1fr 0.25fr 0.45fr;
  grid-template-areas:
    "nav nav nav nav"
    "main-heading main-heading main-heading main-heading"
    "sub-heading sub-heading sub-heading sub-heading"
    "icons icons icons icons"
    "images images images contents";
  grid-gap: 0.2rem;
}
#navbar {
  border-top: 1px solid black;
}
#navbar {
  display: inline-block;
  grid-area: nav;
  background: orange;
  border-radius:var(--main-radius);
  padding-top: var(--main-padding);
  position: relative;
}

#navbar img, header, ul, li {
  display: inline-block;
  vertical-align: middle;
}

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

h3 {
  margin-left:120px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /*display: inline-block;*/
  float: right;
  margin-top: 25px;
  margin-right: 20px;
}

li {
  display: inline-block;
  padding: 12px;
}

#main-heading {
  grid-area: main-heading;
  background: yellow;
}

#sub-heading {
  grid-area: sub-heading;
  background: pink;
}

#icons {
  grid-area: icons;
  background: lightblue;
}

#images {
  grid-area: images;
  background: orange;
}

#contents {
  grid-area: contents:
    background: brown;
}
/*@media only screen and (max-width: 600px) {
  #main {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2 0.5;
    grid-template-areas:
      "nav"
      "sidebar"
      "main"
      "content1"
      "content2"
      "content3";
  }
}*/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive J Web</title>
  <link rel="stylesheet" href="Lab04.css">
</head>
<body>
  <div id = "main">
    <div id = "navbar">
      <img src="https://www.allintheloop.com/assets/img/logo-sample.jpg" alt=lens width=90px height=90px>
      <header>
        <h3>
          Art of Photography
        </h3>
      </header>
      <ul>
        <li>Photography</li>
        <li>History</li>
        <li>Samples</li>
        <li>About</li>
      </ul>
    </div>
    <div id = "main-heading">Main-heading</div>
    <div id = "sub-heading">Sub-heading</div>
    <div id = "icons">Icon</div>
    <div id = "images">Images</div>
    <div id ="contents">Contents</div>
  </div>
</body>
</html>

你也可以试试这个解决方案，你应该给你的导航栏固定高度并将显示更改为 flex 对齐项目：居中。

https://codepen.io/boutahlilsoufiane/pen/NWbPgra

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

Trouble increasing image size to expand outside of the parent

html

css

layout