Schaltflächen erstellen, die sich an die Bildschirmgröße anpassen – ausführliche Erklärung zur Verwendung von Hintergrundbildern

Question

Ich entwickle ein Pfsense-Captive-Portal, das die Anzeige mehrerer Grafiken nebeneinander und die Anpassung an die Bildschirmgröße des Geräts erfordert. Dies kann gut mit dem Bildeingabetyp erreicht werden. Das Pfsense-Gerät erkennt diesen Commit jedoch nicht richtig. Damit es funktioniert, ist ein Commit-Typ mit dem Wert „Continue“ erforderlich.

Ich habe stattdessen versucht, ein Hintergrundbild zu verwenden, aber das Hintergrundbild lässt sich nicht skalieren. Wenn der Bildschirm kleiner wird, erscheint er in voller Größe und wird beschnitten.

Wie ändere ich die Größe des Hintergrundbilds?

<style>
    #content{font-family:'Source Sans Pro',sans-serif;background-color: grey; -moz-background-size:cover; Hintergrundgröße:cover; display:table-cell;vertikal-align:middle;}
    #content{text-align:center} body,html{margin:0; padding:0; width:100%;
    .row {Anzeige: Flex;}
    .column {flex: 50%; padding: 50px;}
    Eingabe {
        Hintergrundgröße: enthalten;
        Größe ändern: beide;
        Rand: 0;
        Breite: 100 %;
        maximale Breite: 100 %;
        Polsterung: 0 0 50 %;
        Objektanpassung: verkleinern;
        Texteinzug: 100 %;
        Leerraum: nowrap;
        Überlauf versteckt;
        }
    @media screen und (max-width: 500px) {
        .Spalte {
        Breite: 100 %;
        }
    }
  </style>
....
<Körper>
<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(image1.png) no-repeat;"
        <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(image2.png) no-repeat;"
        <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    </form>
  </div>
</div>
</body>

Answer 1

background-size: cover会实现这个效果。

<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>