html - 将导航栏粘贴到居中图像

Question

我想在页眉和页脚、页眉固定顶部、页脚固定按钮、图像和导航栏一起调整大小的网页中制作居中调整大小的图像+导航栏，尊重图像的纵横比(图像可能会缩小，但绝不会绕过原始尺寸。

图像完成，如愿以偿!

我遇到的问题是，我在调整大小时无法使导航栏固定在图像的底部!

这是我的代码: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>

我希望弹出内容与图像动态宽度保持在一起。 图像仍然可以缩小!仅修复导航栏以跟随图像并坚持下去。

谢谢!

Answer 1

已更新您需要的样式请查看codepen: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的样式请引用上面给出的codepen