Question

我正在尝试制作一个由7个图标图像组成的侧面导航栏。我将所有图像包装在div中，但是如果浏览器窗口缩小（高度），我希望它们能够响应。到目前为止，这就是我的

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库，它是一个非常好的响应式库，其中包含许多很棒的东西。

这是我使用引导程序的代码：

<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

您可以使用媒体断点为图标设置特殊的窗口高度

#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个，并且我还需要其他东西的顶部。因此，在稍微弄乱了位置之后，我决定为每个左上方的房间都想要大约17％的vh。您有7个，所以我大概会以大约14％vh（100/7 =〜14.2）的速度开始放置，为每个图标提供自己的CSS ID，并提供一个用于处理所有图像的类。所以对于您来说，我会做同样的事情。为了保持正方形，您必须同时使用vh作为高度和宽度。（vh代表视口高度，因此它会根据视图窗口的大小进行调整。）

#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;
}

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

全高侧导航栏由图像组成-如何？

4 个答案: