当浏览器窗口加宽时,在向其应用填充时图像会缩小

时间:2016-11-29 11:43:29

标签: html css

当我将填充添加到菜单按钮时,我将用它来显示下拉菜单,它缩小了图像的尺寸。随着浏览器窗口的扩大,它会继续缩小,直到无法再看到它。在下面的代码中,它的大小正确,但如果我添加任何类型的填充,则会出现问题。 ul隐藏在显示菜单按钮的屏幕尺寸上,反之亦然。

.menu-button {
  float: right;
  margin: 8px 3% 0 0;
  min-width: 30px;
  display: inline-block;
}

#landing {
  background: url('../img/coffee-laptop.jpg') no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
  width: 100%;
}
<div id="landing">
  <header class="group">
    <h1 class="logo"><a href="index.html">Ben Quartermaine</a></h1>
    <a class="menu-button"><img src="img/icons/menu.svg"></a>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#process">Process</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
</div>

0 个答案:

没有答案