如何让pfSense Captive Portal中带背景图的Submit按钮自适应屏幕

针对你遇到的问题——必须使用type="submit"且value="Continue"的按钮才能被pfSense识别，但背景图无法自适应缩放的情况，可通过以下优化后的代码实现需求：

修改后的完整代码 #

CSS部分 #

<style>
#content{
    font-family:'Source Sans Pro',sans-serif;
    background-color: gray; 
    display:table-cell; 
    vertical-align:middle;
    text-align:center;
}
body,html{
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
    display:table;
}    
.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
}
.column {
    flex: 1;
    min-width: 250px;
    max-width: 400px;
    padding: 20px;
}
.btn-submit {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border: 0;
    width: 100%;
    padding-top: 75%; /* 根据图片比例调整，4:3比例用75%，1:1用100% */
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
@media screen and (max-width: 500px) {
    .row {
        flex-direction: column;
        align-items: center;
    }
    .column {
        width: 100%;
        max-width: 350px;
    }
}
</style>

HTML部分 #

<body>
<div id="content">
<div class="row">
  <div class="column">
    <form name="login_form" method="post" action="$PORTAL_ACTION$">
        <input name="redirurl" type="hidden" value="https://url">
        <input name="accept" type="submit" class="btn-submit" style="background-image: url(image1.png);" value="Continue">
        <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    </form>
  </div>
  <div class="column">
    <form name="login_form" method="post" action="$PORTAL_ACTION$">
        <input name="redirurl" type="hidden" value="https://url">
        <input name="accept" type="submit" class="btn-submit" style="background-image: url(image2.png);" value="Continue">
        <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    </form>
  </div>
</div>
</body>

关键优化说明 #

• 背景图自适应：通过background-position: center center确保背景图始终居中，background-size: contain保证图片按比例完整缩放，避免截断。
• 宽高比固定：用padding-top替代固定高度，根据图片实际比例设置数值（如4:3比例设为75%），维持按钮的正确比例。
• 文字隐藏：text-indent: -9999px彻底隐藏value的文字，避免在小屏幕上出现残留。
• Flex布局适配：添加flex-wrap: wrap让按钮在中等屏幕自动换行，移动端改为垂直排列，同时限制按钮的最小/最大宽度，避免过度拉伸或压缩。

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