代码之家 › 专栏 › 技术社区 › Leo Messi

当窗口变小时,如何使导航栏以与其中图像相同的比例缩小其大小

css html

Leo Messi · 技术社区 · 6 年前

我有一个包含图像和菜单的导航栏。

我尝试了很多选择,如使用百分比,vh,大众等,但没有解决我的问题。

.main-bar {
  background-color: #212121;
  font-size: 1.5vw;
  color: #8a8a8d;
  font-family: sans-serif;
  display: inline-flex;
  width: 100%;
}

.imgs {
  margin-top: 10px;
  margin-bottom: 0px;
  margin-left: 25px;
  margin-right: 30px;
  /* width: fit-content; */
  width: 700px;
  height: 110px;
}

.imgs img {
  width: 100%;
  height: auto;
}

.menu {
  width: 100%;
  margin-top: 45px;
}

#login {
  float: right;
  margin-right: 2vw;
  margin-top: -10px;
}

.menu_item {
  padding: 10px;
}

.menu_item:hover,
.login:hover {
  color: #E3E3E3;
  cursor: pointer;
}

<div class="main-bar">
  <div class="imgs">
    <img src="https://i.imgur.com/SX4tC2y.png" alt="image">
  </div>
  <div class="menu">
    <span class="menu_item">Houses</span>
    <span class="menu_item">Apartments</span>
    <span class="menu_item">Cars</span>
    <span class="menu_item">Rents</span>
    <span class="menu_item">Others</span>
    <span class="menu_item" id="login">Login</span>
  </div>
</div>

有什么建议吗?

1 回复 | 直到 6 年前

Temani Afif 6 年前

.main-bar {
  background-color: #212121;
  font-size: 1.5vw;
  color: #8a8a8d;
  font-family: sans-serif;
  display: inline-flex;
  width: 100%;
}

.imgs {
  margin-top: 10px;
  margin-bottom: 0px;
  margin-left: 25px;
  margin-right: 30px;
  width: 700px;
  padding-bottom:10px;
}

.imgs img {
  width: 100%;
  height: auto;
}

.menu {
  width: 100%;
  margin-top: 45px;
}

#login {
  float: right;
  margin-right: 2vw;
  margin-top: -10px;
}

.menu_item {
  padding: 10px;
}

.menu_item:hover,
.login:hover {
  color: #E3E3E3;
  cursor: pointer;
}

<div class="main-bar">
  <div class="imgs">
    <img src="https://i.imgur.com/SX4tC2y.png" alt="image">
  </div>
  <div class="menu">
    <span class="menu_item">Houses</span>
    <span class="menu_item">Apartments</span>
    <span class="menu_item">Cars</span>
    <span class="menu_item">Rents</span>
    <span class="menu_item">Others</span>
    <span class="menu_item" id="login">Login</span>
  </div>
</div>