Question

我正在导航栏上，在那里我将有一个汉堡菜单用于切换扩展菜单。

我想避免为汉堡菜单元素（.extendedMenu__toggle）显式设置宽度，并尽可能根据.header上设置的字体大小进行缩放。

该元素在弯曲时会从父级获取高度，但不确定如何将其转换为适当的width属性，以便获得完美的正方形。

html {
  font-size: 62.5%;
}

html, body {
  font-family: helvetica;
  line-height: 1.45;
}

.header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;

  font-size: 1.3rem;
  font-weight: bold;
}

.nav {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  position: relative;
  z-index: 5;
  margin: 1rem;
}

.extendedMenu__toggle {
  /*width: 37px;
  height: 37px;*/
  background: red;
}

.navLink {
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  border: 2px solid;
  border-radius: 30px;
  margin-left: 0.75rem;
  text-transform: uppercase;
}

.navLink:first-child {
  margin-left: 0;
}

<header class="header" role="banner">
  <nav class="nav">
    <div class="extendedMenu__toggle">
      <span></span>
      <span></span>
      <span></span>
    </div>

    <a class="navLink" href="#">Home</a>
    <a class="navLink" href="#">About</a>
    <a class="navLink" href="#">News</a>
  </nav>
</header>

Answer 1

选项1：使用Javascript。元素渲染后，您将检查高度，然后将flex-basis设置为元素高度。我还设置了overflow: hidden，因为我的内容是“非正方形”。

SO的代码片段似乎不喜欢window.onload，所以这里是codepen example

html {
  font-size: 62.5%;
}

html, body {
  font-family: helvetica;
  line-height: 1.45;
}

.header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;

  font-size: 4rem;
  font-weight: bold;
}

.nav {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  position: relative;
  z-index: 5;
  margin: 1rem;
}

.extendedMenu__toggle {
  /*width: 37px;
  height: 37px;*/
  background: red;
  overflow:hidden;
}

.navLink {
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  border: 2px solid;
  border-radius: 30px;
  margin-left: 0.75rem;
  text-transform: uppercase;
}

.navLink:first-child {
  margin-left: 0;
}

<header class="header" role="banner">
  <nav class="nav">
    <div id="box" class="extendedMenu__toggle">
       menu
    </div>

    <a class="navLink" href="#">Home</a>
    <a class="navLink" href="#">About</a>
    <a class="navLink" href="#">News</a>
  </nav>
</header>

选项2：使用图像。这有点怪异，但只要在HTML中呈现，方形图像就会尝试保留其比例。有几种可用的方法：

使用HTML透明背景放置汉堡菜单的图像。（很大，所以您不会放大，只是缩小）。
在HTML中放置一个10px x 10px的透明图像，并将其他内容绝对放置在其顶部。
在CSS中用pseudo class创建一个content: url(image.jpg);，然后在其上方分层内容。

第一个是最容易显示的，所以我正在做那个。我会在图像中添加max-height，以免图像失控。

html {
  font-size: 62.5%;
}

html, body {
  font-family: helvetica;
  line-height: 1.45;
}

.header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;

  font-size: 4rem;
  font-weight: bold;
}

.nav {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  position: relative;
  z-index: 5;
  margin: 1rem;
}

.extendedMenu__toggle {
  /*width: 37px;
  height: 37px;*/
  background: red;
}
.extendedMenu__toggle img {
  display:block;
  max-height: 6rem;
}

.navLink {
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  border: 2px solid;
  border-radius: 30px;
  margin-left: 0.75rem;
  text-transform: uppercase;
}

.navLink:first-child {
  margin-left: 0;
}

<header class="header" role="banner">
  <nav class="nav">
    <div class="extendedMenu__toggle">
       <img src="https://cdn1.imggmi.com/uploads/2018/10/15/e86f8a312edd60d643c8d80212b64dba-full.png" />
    </div>

    <a class="navLink" href="#">Home</a>
    <a class="navLink" href="#">About</a>
    <a class="navLink" href="#">News</a>
  </nav>
</header>

与flex子元素上的高度相同的宽度

1 个答案: