如何让登录页底部背景图适配屏幕及登录选项显示状态

1. 清理冲突样式，统一规则 #

先合并重复的CSS定义，移除矛盾的尺寸设置，让footer高度由内容自适应，同时保留多边形形状：

.footer {
    background-image: url('../img/modeler-footer-tablet2.jpg');
    clip-path: polygon(50% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 15%);
    background-repeat: no-repeat;
    background-position: center bottom; /* 确保背景图底部对齐容器 */
    background-size: cover; /* 按比例覆盖容器，避免拉伸变形 */
    width: 100%;
    min-height: 200px; /* 设置最小高度，防止内容过少时形状塌陷 */
    padding-top: 15%; /* 配合顶部倾斜角预留空间，保证多边形完整显示 */
    box-sizing: border-box;
}

2. 实现内容自适应 #

当第三方登录选项存在时，footer会随内部内容自动增高；移除选项后，footer会收缩到min-height+padding-top控制的最小高度，背景图通过background-size: cover自动适配容器尺寸，不会出现底部空白或图片拉伸问题。

3. 兼容多屏幕与完整显示需求 #

如果需要完全显示背景图不裁切，可改用contain并匹配图片底色：

.footer {
    /* 其他属性不变 */
    background-size: contain;
    background-color: #替换为图片的底色;
}

4. 优化HTML结构（可选） #

给footer内部内容添加容器，避免内容直接干扰多边形形状：

<div class="footer footer-content">
    <div class="footer-inner">
        <!-- 第三方登录选项或其他内容 -->
    </div>
</div>

补充内部容器样式：

.footer-inner {
    padding: 20px;
    position: relative;
    z-index: 1; /* 确保内容在背景图上方 */
}

关键说明 #

• clip-path的百分比基于容器自身尺寸，无论容器高度变化，多边形形状都会自适应调整
• 不要固定容器高度（如100vh、37vh），让高度由内容、最小高度和内边距共同决定，实现真正的自适应

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