html - 如何防止 100vh 图像扩大视点？

Question

对于我的 #l-splash 图像，我遇到了 height: 100vh 超出视点的问题。

我试过改变溢出和不同的最大高度。我希望我的宽度占据左侧网格的 100%，这样它就正好占据了屏幕的一半。我怀疑问题是我的导航栏是如何粘住的，但理想情况下我需要它继续粘在屏幕顶部。感谢您的帮助

https://jsfiddle.net/mtgcosxd/1/

header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background: #fffaf0;
  position: sticky;
  width: 100%;
  top: 0;
  font-family: 'Montserrat', sans-serif;
  /*font-family: 'Gotham-Light', gotham;*/
  font-weight: 300;
  font-size: 1vw;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  padding: 0px;
  margin: 0px;
  color: #fffaf0;
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
}

.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0%;
  color: #80985d;
}

.navLink {
  padding: 0 10px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}

#logo {
  margin-top: 4px;
  margin-bottom: 4px;
  width: 4%;
  height: 4%;
  cursor: pointer;
}

.container {
  display: grid;
  grid-template-columns: [content] 1fr [images] 1fr
}

.content {
  grid-column: content;
  background: #2f6e84;
}

#l-splash {
  width: 100%;
  height: 100vh;
  overflow: auto;
}

<div class="nav">
  <header>
    <div class="navLink" id="story-scroll">Our Story</div>
    <div class="navLink" id="menu-scroll">Menu</div>
    <img src="https://placekitten.com/200/300" id="logo" lt="logo">
    <div class="navLink" id="press-scroll">Press</div>
    <div class="navLink" id="contact-scroll">Contact</div>
  </header>
</div>

<div class="container">

  <div class="content">
    <div id="splash container">
      <img id="l-splash" src="https://images.unsplash.com/photo-1526069631228-723c945bea6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80">
    </div>

Answer 1

您不需要在图像上设置 height: 100vh - 因为您的布局中已经有了 flexboxes 和 grids，您可以使用 body 上的 column flexbox 包装器继承高度 - 以下是更改:

• 让你 body 成为一个 column flexbox 并给了 100vh 高度，

• 使用 container< 上的 flex: 1 允许 container 填充 nav 留下的剩余空间,

• 将 height: 100% 添加到 img 的 container,

• 使用 height: 100% 并使用 object-fit 在其容器中填充图像,

body {
  max-width: 100%;
  overflow-x: hidden;
  padding: 0px;
  margin: 0px;
  color: #fffaf0;
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  /* made a flexbox */
  display: flex;
  flex-direction: column;
  height: 100vh; /* full-height */
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background: #fffaf0;
  position: sticky;
  width: 100%;
  top: 0;
  font-family: 'Montserrat', sans-serif;
  /*font-family: 'Gotham-Light', gotham;*/
  font-weight: 300;
  font-size: 1vw;
}

.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0%;
  color: #80985d;
}

.navLink {
  padding: 0 10px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}

#logo {
  margin-top: 4px;
  margin-bottom: 4px;
  width: 4%;
  height: 4%;
  cursor: pointer;
}

.container {
  display: grid;
  grid-template-columns: [content] 1fr [images] 1fr;
  flex: 1; /* added */
}

.content {
  grid-column: content;
  background: #2f6e84;
}

.content > div {
  height: 100%; /* added */
}

#l-splash {
  width: 100%;
  /*height: 100vh;*/
  height: 100%;
  object-fit: cover; /* added */
  overflow: auto;
  display: block; /* remove inline element whitespace */
}

<div class="nav">
  <header>
    <div class="navLink" id="story-scroll">Our Story</div>
    <div class="navLink" id="menu-scroll">Menu</div>
    <img src="https://placekitten.com/200/300" id="logo" lt="logo">
    <div class="navLink" id="press-scroll">Press</div>
    <div class="navLink" id="contact-scroll">Contact</div>
  </header>
</div>
<div class="container">
  <div class="content">
    <div id="splash container">
      <img id="l-splash" src="https://images.unsplash.com/photo-1526069631228-723c945bea6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80">
    </div>

---

但您仍然有溢出 - 现在怎么办？

• 将 min-height: 0 添加到 container 以便您覆盖默认的 min-height: auto 用于列方向的 flex 元素，

  您可以在下面看到一些示例，说明为什么需要这样做:

  • Flexbox affects overflow-wrap behavior

  • Flexbox resize and scrollable overflow

  • Why don't flex items shrink past content size?

• 同样 min-height: auto 对于 grid item 可以使用 min-height: 0 覆盖 内容元素

  您可以在下面看到一些示例，说明为什么需要这样做:

  • > css-grid creates an imaginary column
  • > How to make images stay within the rows of a css grid container?

请看下面的演示:

body {
  max-width: 100%;
  overflow-x: hidden;
  padding: 0px;
  margin: 0px;
  color: #fffaf0;
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  /* made a flexbox */
  display: flex;
  flex-direction: column;
  height: 100vh; /* full-height */
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background: #fffaf0;
  position: sticky;
  width: 100%;
  top: 0;
  font-family: 'Montserrat', sans-serif;
  /*font-family: 'Gotham-Light', gotham;*/
  font-weight: 300;
  font-size: 1vw;
}

.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0%;
  color: #80985d;
}

.navLink {
  padding: 0 10px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}

#logo {
  margin-top: 4px;
  margin-bottom: 4px;
  width: 4%;
  height: 4%;
  cursor: pointer;
}

.container {
  display: grid;
  grid-template-columns: [content] 1fr [images] 1fr;
  flex: 1; /* added */
  min-height: 0; /* added */
}

.content {
  grid-column: content;
  background: #2f6e84;
  min-height: 0; /* added */
}

.content > div {
  height: 100%; /* added */
}

#l-splash {
  width: 100%;
  /*height: 100vh;*/
  height: 100%;
  object-fit: cover; /* added */
  overflow: auto;
  display: block; /* remove inline element whitespace */
}

<div class="nav">
  <header>
    <div class="navLink" id="story-scroll">Our Story</div>
    <div class="navLink" id="menu-scroll">Menu</div>
    <img src="https://placekitten.com/200/300" id="logo" lt="logo">
    <div class="navLink" id="press-scroll">Press</div>
    <div class="navLink" id="contact-scroll">Contact</div>
  </header>
</div>
<div class="container">
  <div class="content">
    <div id="splash container">
      <img id="l-splash" src="https://images.unsplash.com/photo-1526069631228-723c945bea6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80">
    </div>