由图像组成的全高侧边导航栏 - 怎么做？

Question

我正在尝试制作一个由 7 个图标图像组成的侧边导航栏。我将所有图像都包裹在 div 中，但我希望它们能够在浏览器 window 缩小（高度）时做出响应。这是我目前所拥有的，

HTML:

<body>

<div id="sidenav">
    <div id="nav1"><img src="img/menu.png" alt=""></div>
    <div id="nav2"><img src="img/icon1.png" alt=""></div>
    <div id="nav3"><img src="img/icon2.png" alt=""></div>
    <div id="nav4"><img src="img/icon3.png" alt=""></div>
    <div id="nav5"><img src="img/icon4.png" alt=""></div>
    <div id="nav6"><img src="img/icon5.png" alt=""></div>
    <div id="nav7"><img src="img/icon6.png" alt=""></div>
</div>  

</body>

CSS:

body {
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;
}
#nav1 img, #nav2 img, #nav3 img, #nav4 img, #nav5 img, #nav6 img, #nav7 img {
    width: 100px;
}
#sidenav {
    position: fixed;
}

所以基本上，每当浏览器垂直调整大小时，我希望所有图像都随之调整大小，以便所有 7 个图像始终同样可见且呈正方形。稍后，我想制作这些图像按钮，但首先我需要弄清楚这一点。在此先感谢您的帮助！ :-)

Answer 1

据我所知，仅靠 css 是做不到的。

window.onresize = function() {
  var height = document.body.clientHeight;
  var nav = document.getElementById('sidenav');
  var image = document.getElementsByTagName('img');
  nav.setAttribute('style', 'height:' + height + 'px');
  for (var i = 0; i < image.length; ++i) {
    image[i].setAttribute('style', 'height:' + height / image.length + 'px');
  }
};

<div id="sidenav">
  <div id="nav1"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
  <div id="nav2"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
  <div id="nav3"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
  <div id="nav4"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
  <div id="nav5"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
  <div id="nav6"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
  <div id="nav7"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
</div>

Answer 2

我建议你试试 bootstrap 库，它是一个非常好的响应式库，有很多很棒的东西。

这是我使用 bootstrap 的代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col-md-12">
      <img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
    </div>
    <div class="col-md-12">
      <img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
    </div>
    <div class="col-md-12">
      <img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
    </div>
    <div class="col-md-12">
      <img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
    </div>
    <div class="col-md-12">
      <img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
    </div>
  </div>
</div>

此致，哈立德

Answer 3

您可以使用媒体断点为特殊 window 高度设置图标样式

#sidenav{
  display: flex;
}

.nav-icon img{
  max-height: 50px;
}

@media (max-height: 700px){
  .nav-icon img{
    max-height: 40px;
  }
}

@media (max-height: 500px){
  .nav-icon img{
    max-height: 30px;
  }
}

@media (max-height: 300px){
  .nav-icon img{
    max-height: 20px;
  }
}

<body>
  <div id="sidenav">
    <div id="nav1" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301804.svg" alt=""></div>
    <div id="nav2" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301805.svg" alt=""></div>
    <div id="nav3" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301814.svg" alt=""></div>
    <div id="nav4" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301808.svg" alt=""></div>
    <div id="nav5" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301812.svg" alt=""></div>
    <div id="nav6" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301809.svg" alt=""></div>
    <div id="nav7" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301817.svg" alt=""></div>
  </div>
</body>

另一种方法 - 在 css 中使用 vh 指标使高度响应屏幕尺寸。

#sidenav{
  display: flex;
}

.nav-icon img{
  height: 15vh; /* 100vh = size of window */
}

<body>
  <div id="sidenav">
    <div id="nav1" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301804.svg" alt=""></div>
    <div id="nav2" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301805.svg" alt=""></div>
    <div id="nav3" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301814.svg" alt=""></div>
    <div id="nav4" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301808.svg" alt=""></div>
    <div id="nav5" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301812.svg" alt=""></div>
    <div id="nav6" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301809.svg" alt=""></div>
    <div id="nav7" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301817.svg" alt=""></div>
  </div>
</body>

Answer 4

好吧，我实际上已经在我的页面上完成了这个（非常高兴真正回答我的第一个问题）。

所以所做的就是将屏幕除以图标的数量，并为每个图标找到一个位置。我的有 5 个，我还需要顶部来做其他事情。所以在稍微弄乱了定位之后，我决定我想要每个 vh 的大约 17%，并在顶部留出空间。你有 7 个，所以我可能会从 14% vh (100/7 = ~14.2) 开始放置，给每个图标它自己的 css id，和一个 class 来处理所有图像。所以对于你的，我会做同样的事情。为了保持正方形，您必须同时使用 vh 作为高度和宽度。（vh 代表视口高度，因此它会根据视图 window 进行调整。）

#sidenav img{
    height: 14vh;
    width:  14vh;
}
#nav1{
    position: fixed;
    top:0vh;
}
#nav2{
    position: fixed;
    top:14vh;
}
#nav3{
    position: fixed;
    top:28vh;
}
#nav4{
    position: fixed;
    top:42vh;
}
#nav5{
    position: fixed;
    top:56vh;
}
#nav6{
    position: fixed;
    top:70vh;
}
#nav7{
    position: fixed;
    top:84vh;
}

希望对你有用。希望得到我的第一个问题的答案。

由图像组成的全高侧边导航栏 - 怎么做？

Full height side navbar made up of images - how to?

html

css

image

navbar

sidenav