我正在尝试制作一个由 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 个图像始终同样可见且呈正方形。后来，我想制作这些图像按钮，但首先我需要弄清楚这一点。在此先感谢您的帮助！:-)