придерживаться navbar к центрированному изображению - PullRequest
Новая
       6

придерживаться navbar к центрированному изображению

0 голосов
/ 10 декабря 2018

Я хочу создать центрированное изображение с измененным размером + панель навигации на веб-странице с верхним и нижним колонтитулом, фиксированным верхним колонтитулом, нижним колонтитулом с фиксированным нижним колонтитулом, а также изображение и панель навигации вместе должны иметь изменяемый размер, с учетом соотношения сторон изображения (изображение может уменьшиться, но никогда не обойти исходный размер.

изображение готово, ведёт себя так, как хочет!

проблема, с которой я столкнулся, я не удалось заставить панель навигации застрять в нижней части изображения, так как оно было изменено!

вот мой код: https://codepen.io/chlegou/pen/vvYzya

<div class="popup">

    <img class="image" src="https://lh5.googleusercontent.com/-h2cD5VqGNGk/U1t6QX7kY5I/AAAAAAAAFvc/46BsvAWjmSw/w640-h360-no/IMG_2061+SCR.jpg" />
    <span class="content">

        <span class="navbar">Navigation Bar</span>

    </span>
</div>

я хочу всплывающее окно с содержимымвместе с динамической шириной изображения. изображение все еще может сжиматься как есть! исправьте только панель навигации, чтобы следовать за изображением и придерживаться его.

спасибо!

1 Ответ

0 голосов
/ 12 декабря 2018

ОБНОВЛЕНО стиль, как вам нужно, пожалуйста, проверьте кодовое заглавие: https://codepen.io/anon/pen/ZVOoqq

<div class="outer-container">
   <div class="inner-container">
       <img class="image" src="https://lh5.googleusercontent.com/-h2cD5VqGNGk/U1t6QX7kY5I/AAAAAAAAFvc/46BsvAWjmSw/w640-h360-no/IMG_2061+SCR.jpg"/>
       <div class="centered-content">
          <span style="overflow: hidden">Navigation Bar</span>
       </div>
   </div>
</div>

, а для стилевого оформления элементов div см. Кодовое поле, указанное выше

...