Css 如何将导航附加到此流体图像？

我使用从989px（最大图像大小）以下开始的媒体查询为我的背景图像创建了一个断点。我不使用显示图像，因为我想为不同的设备使用不同的图像（这样移动设备当然不会下载最大的图像）。（每个图像在特定断点中定义）。说得早一点，这是现场直播

这方面的css如下所示：

.splash {
  max-width: 988px;
  margin:auto;
  height:380px;
}

@media (min-width: 989px) {
   .splash {
       background: url('../images/academy.png') no-repeat;
   }
}

@media (max-width: 989px) and (min-width: 321px) {
   .splash {
       background: url('../images/academy-mid.png') no-repeat;
       max-width: 640px;
       padding: 4px;
       position: relative;
       background-size: 100%;
   }
}

<header class="splashhead">
  <div class="splash">
    <nav class="kochalka">
      <ul>
         <li class="navclass first active"><a href="http://glorkianwarrior.com/" title="Home" >Home</a></li>
         <li class="navclass"><a href="news/" title="News" >News</a></li>
         <li class="navclass"><a href="gallery.html" title="Gallery" >Gallery</a></li>
         <li class="navclass last"><a href="guide.html" title="Guide" >Guide</a></li>
      </ul>
    </nav>
  </div>
</header>

这使得一旦页面达到988像素或更低（低至321像素），飞溅图像就会变成流体。在浏览器宽度小于640px之前，它实际上不会更改其宽度/高度。它下面的导航栏嵌套在下。splash不会更改其位置。这是因为它与.splash的高度有关。html看起来是这样的：

.splash {
  max-width: 988px;
  margin:auto;
  height:380px;
}

@media (min-width: 989px) {
   .splash {
       background: url('../images/academy.png') no-repeat;
   }
}

@media (max-width: 989px) and (min-width: 321px) {
   .splash {
       background: url('../images/academy-mid.png') no-repeat;
       max-width: 640px;
       padding: 4px;
       position: relative;
       background-size: 100%;
   }
}

<header class="splashhead">
  <div class="splash">
    <nav class="kochalka">
      <ul>
         <li class="navclass first active"><a href="http://glorkianwarrior.com/" title="Home" >Home</a></li>
         <li class="navclass"><a href="news/" title="News" >News</a></li>
         <li class="navclass"><a href="gallery.html" title="Gallery" >Gallery</a></li>
         <li class="navclass last"><a href="guide.html" title="Guide" >Guide</a></li>
      </ul>
    </nav>
  </div>
</header>

如果我不给它那个高度，它就会消失。我试着给它100%或页面本身的百分比。我试着给它的父母一个特定的高度，然后在.splash上做100%，但这并没有改变导航栏的位置

---

是否可以让此导航根据浏览器大小更改其大小？我是否必须找到一种方法来使用页面上的图像—每个图像都在自己的div中—并使用媒体查询来显示：非相关div中无？

您需要将

nav

包装在一个div中，然后使用一些巧妙的CSS为其提供一个纵横比。见下文-

这是您的代码： 如您所见，我在

nav

周围添加了一个

wrapper

div

<header class="splashhead">
    <div class="splash">
    <div class="wrapper">
      <nav class="kochalka" style="">
        <ul>
            <li class="navclass first active"><a href="http://glorkianwarrior.com/" title="Home">Home</a></li>
            <li class="navclass"><a href="news/" title="News">News</a></li>
            <li class="navclass"><a href="gallery.html" title="Gallery">Gallery</a></li>
            <li class="navclass last"><a href="guide.html" title="Guide">Guide</a></li>
        </ul>
      </nav>
</div>

  </div></header>

添加以下样式，然后它将按照您的意愿工作

<style>
.wrapper {
 width: 100%;
 display: inline-block;
 position: relative;

}
.wrapper:after {
    padding-top: 56.25%; /*16:9 ratio*/
    display: block;
    content: '';
}
</style>

.包装纸{
宽度：100%；
显示：内联块；
位置：相对位置；
}
.包装工：之后{
填充顶部：56.25%；/*16:9比率*/
显示：块；
内容：''；
}