Альтернативы спариванию дочерних и родительских div

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

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

Вы включили одно и то же изображение два раза.

Gerard 26.10.2018 04:39

@ Джерард мои извинения, теперь это исправлено

Murdoc Gould 26.10.2018 15:17
0
2
49
0

Другие вопросы по теме