Хорошо, поэтому цель состоит в том, чтобы изменить размер изображения, пока навигационная панель и изображение остаются в паре. Попытка соединения div безуспешно.
Мой код:
body {
background-color: #CBB899;
}
#banana {
position: relative;
height: 115%;
width: 101.65%;
}
#navbar {
background-color: #CBB899;
height: 5%;
width: 103.65%;
z-index: 1;
margin-top: -53.5%;
/*margin-bottom: 52.8%;*/
margin-left: -3%;
position: absolute;
}
<div id="banana">
<img src="first%20page.png" alt="First Page" style="width:101.65%;height:115%;margin-left:-1%; margin-top: -1%;">
<div id="navbar">
<a href=#sixth><img src="Screen%20Shot%202018-10-20%20at%2012.03.04%20AM.png" alt="Location" style="height: 90%; width: 8%; z-index: 100; margin-left: 2%;"></a>
<a href=#><img src="Screen%20Shot%202018-10-20%20at%2012.02.19%20AM.png" alt="Home" style="height: 90%; width: 6.5%;"></a>
<a href=# footer><img src="Screen%20Shot%202018-10-20%20at%2012.02.41%20AM%20(2).png" alt="Contact Us" style="height: 90%; width: 9%;"></a>
</div>
</div>
У меня есть больше кода, но я включил только то, что было актуально.
Это то, что я хотел бы, чтобы изображение выглядело независимо от изменения размера (я хочу, чтобы панель, конечно, изменяла форму и адаптировалась, но оставалась внутри окна), https://imgur.com/a/oqwkT9z
Это то, что в конечном итоге происходит (поведение изображения точечно, сужается, чтобы соответствовать окну, просто навигационная панель не соответствует) ... https://imgur.com/a/ioF1Kxy
Действительно отчаянно нуждается в любой помощи
Спасибо всем
Мердок