Альтернативы соединению дочернего родительского div - PullRequest
0 голосов
/ 26 октября 2018

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

Действительно отчаянно нуждается в любой помощи Спасибо всем Мердок

...