如何让页脚图片适配全屏幕尺寸并固定底部显示logo？

问题说明 #

页脚在不同设备上没法固定在底部，logo还会被截断，手动改height只能适配个别屏幕。需要实现：

• 不管屏幕多大，页脚都钉在页面底部
• logo稳稳悬浮在右下角，全程完整显示
• 页脚背景图可以拉伸适配各种屏幕

修改后的HTML代码 #

<div class="footer footer-content">
    <div class="content-logo login">
        <span><img src="${url.resourcesPath}/img/logoSample1.png" alt="Logo" /></span>
    </div>      
</div>

修改后的CSS代码 #

/* 给页面主体做基础布局，确保页脚能被顶到底部 */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.footer {
    margin: 0;
    padding: 0;
    /* 自动占据页面剩余空间，实现固定底部 */
    margin-top: auto;
    width: 100%;
    background-image: url('../img/myImage.jpg');
    clip-path: polygon(50% 0%, 100% 9%, 100% 100%, 0% 100%, 0% 9%);
    background-repeat: no-repeat;
    background-size: cover;
    /* 最小高度保证顶部的多边形形状不会消失 */
    min-height: 120px;
    /* 底部留白给logo，避免被截断 */
    padding-bottom: 60px;
    position: relative;
}

.content-logo {
    font-family: 'Source Sans Pro', sans-serif;
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 999;
    /* 限制logo最大宽度，防止小屏幕上超出范围 */
    max-width: 120px;
}

.content-logo img {
    width: 100%;
    height: auto;
}

核心改动点 #

• 固定页脚：给body用flex布局，margin-top: auto让页脚自动挤到页面底部，不用硬写死高度，适配所有屏幕
• 保护logo：给页脚加padding-bottom留足空间，把logo的bottom调小，同时让logo图片自适应宽度，保证不会被截断或超出屏幕
• 适配形状：设置min-height确保顶部的多边形不会因为屏幕太小被挤没，background-size: cover让背景图自动拉伸填充满
• 清理冲突：删掉了原代码里重复的.footer样式（之前两个样式里height属性矛盾，导致适配混乱）

内容的提问来源于stack exchange，提问作者jane