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 pfsensecaptive qui nécessite que plusieurs graphiques soient affichés côte à côte et adaptables à 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 rendre l'image d'arrière-plan redimensionnable ? #content{font-fam

P粉851401475 · Answer

background-size: cover obtiendra cet effet.

#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%;
    }
}

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

répondre à tous(1)je répondrai