Créer des boutons qui s'adaptent à la taille de l'écran - explication détaillée de la façon d'utiliser les images d'arrière-plan

Question

Je développe un portail captif pfsense qui nécessite que plusieurs graphiques soient affichés côte à côte et adaptatifs à la taille de l'écran de l'appareil. Cela peut être bien réalisé en utilisant le type d’entrée image. Cependant, le périphérique pfsense ne reconnaît pas correctement cette validation. Il nécessite un type de commit avec la valeur « Continuer » pour fonctionner.

J'ai essayé d'utiliser une image d'arrière-plan à la place, mais l'image d'arrière-plan ne s'adapte pas. À mesure que l’écran devient plus petit, il apparaît en taille réelle et est recadré.

Comment puis-je redimensionner l'image d'arrière-plan ?

....



  

    

        
        
        
    
  
  

    
        
        
        
    
  

Answer 1

background-size: cover obtiendra cet effet.

<input name="accept" type="submit" style="background: url(https://picsum.photos/1500/1500?random=1) no-repeat; background-size: cover;" value="继续">

#content{font-family:'Source Sans Pro',sans-serif;background-color: gray; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; display:table-cell; vertical-align:middle;}
#content{text-align:center} body,html{margin:0; padding:0; width:100%; height:100%; display:table}    
.row {display: flex;}
.column {flex: 50%; padding: 50px;}
input {
    background-size: contain;
    resize: both;
    border: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 0 50%;
    object-fit: scale-down;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
@media screen and (max-width: 500px) {
    .column {
        width: 100%;
    }
}

<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" style="background: url(https://picsum.photos/1500/1500?random=1) no-repeat; background-size: cover;" value="继续">
        <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" style="background: url(https://picsum.photos/1500/1500?random=2) no-repeat; background-size: cover;" value="继续">
        <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    </form>
  </div>
</div>