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

更新所需的样式，请检查代码笔：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样式的信息，请参阅上面给出的代码笔

将导航栏粘贴到居中图像

1 个答案: