我正在尝试制作一个由 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 个图像始终同样可见且呈正方形。稍后，我想制作这些图像按钮，但首先我需要弄清楚这一点。先谢谢您的帮助! :-)
最佳答案
好吧，我实际上已经在我的页面上完成了这个(非常兴奋能够真正回答我的第一个问题)。
所以所做的就是将屏幕除以图标的数量，并为每个图标找到一个位置。我的有 5 个，我还需要顶部来做其他事情。所以在稍微弄乱了定位之后，我决定我想要每个 vh 的大约 17%，并在顶部留出空间。你有 7 个，所以我可能会从 14% vh (100/7 = ~14.2) 开始放置，给每个图标它自己的 css id，和一个类来处理所有图像。所以对于你的，我会做同样的事情。为了保持正方形，您必须同时使用 vh 作为高度和宽度。 (vh 代表视口(viewport)高度，因此它会随着 View 窗口的调整而调整。)
#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;
}
希望对你有用。希望得到我的第一个问题的答案。
关于html - 由图像组成的全高侧边导航栏 - 怎么做？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54044532/