Я пытаюсь создать боковую навигационную панель, состоящую из 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 всегда были одинаково видимыми и квадратными. Позже я хочу сделать эти кнопки изображения, но сначала мне нужно это выяснить. Заранее спасибо за помощь! : -)