css - 背景图像响应

Question

我遇到了一个问题，当我调整窗口大小时我的图像没有响应。我尝试通过将图像放在 html 标签之间并使用 CSS 100% 宽度的图像来修复它，但效果不佳。

之后我尝试了 background-size: cover; 和 background-size: contain;。如果这样做，它是响应式的，但高度太小了。我希望图像显示全高，而不是 400px 之类的。当我输入 height: 100vh; 或 height: 100%; 它没有响应。

nav {
    background:#fff;
    width:100%;
    height:120px;
}
nav#menu{
    clear: both;
    padding-top: 1.5em;
    }

.js nav#menu {
    overflow: hidden;
    max-height: 0;
    }

nav#menu.active {
    max-height: 25em;
    }

nav#menu ul {
    margin: 0;
    padding: 0;
    }

nav#menu li a {
    display: block;
    padding: 1.2em;
    text-decoration: none;
    }
nav#menu li a:hover{
  color:#668bc3;
    }

#intro {
    background-image: url(../images/hero2.jpg);
    background-repeat: no-repeat;
    height:100vh;
    background-size:cover;
    width:100%;
    }

 <header id="intro">
  <a href="#menu" class="menu-link">
     <i class="fa fa-bars" aria-hidden="true"></i>
  </a>
  <nav id="menu">
    <div class="navsvg"><img src="images/logo.svg" alt="logo"></div>
    <ul>  
      <li><a href="#intro">Introduction</a></li>
      <li><a href="#howitworks">How it works</a></li>
      <li><a href="#download">Download</a></li>
      <li><a href="#prototype">Prototype</a></li>
      <li><a href="#posts">Posts</a></li>    
      <li><a href="#contact">Contact</a></li>        
    </ul>
  </nav>
    
</header>

关于如何修复它有什么想法吗？

非常感谢任何帮助!

Answer 1

contain 会留下空格，cover 会剪掉一些东西，100% 100% 会拉伸(stretch)。你不能用不成比例的图片来满足一切。 (这甚至没有意义，这是可能的)。

解决此问题的最佳方法是使用媒体查询为不同的屏幕尺寸更改为不同比例的图像。

示例:

@media screen and (max-width: 480px) {
    #intro {
        background-image: url(../images/hero-mobile.jpg); /* Example Image */
    }
}