将导航栏粘贴到居中的图像

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