Membuat butang yang menyesuaikan dengan saiz skrin - penerangan terperinci tentang cara menggunakan imej latar belakang

Question

Saya sedang membangunkan portal tawanan pfsense yang memerlukan berbilang grafik untuk dipaparkan bersebelahan dan menyesuaikan diri dengan saiz skrin peranti. Ini boleh dicapai dengan baik menggunakan jenis input imej. Walau bagaimanapun, peranti pfsense tidak mengenali komit ini dengan betul. Ia memerlukan jenis komit dengan nilai "Teruskan" untuk berfungsi.

Saya cuba menggunakan imej latar belakang sebaliknya, tetapi imej latar belakang tidak berskala. Apabila skrin semakin kecil, ia kelihatan bersaiz penuh dan dipangkas.

Bagaimanakah saya boleh menjadikan imej latar belakang boleh diubah saiz?

<style>
    #content{font-family:'Source Sans Pro',sans-serif;background-color: grey; -webkit-background-size:cover; background-size:cover; paparan:table-cell;
    #content{text-align:center} body,html{margin:0; lebar:100%;
    .row {paparan: flex;}
    .column {flex: 50% padding: 50px;}
    input {
        saiz latar belakang: mengandungi;
        ubah saiz: kedua-duanya;
        sempadan: 0;
        lebar: 100%;
        lebar maksimum: 100%;
        pelapik: 0 0 50%;
        sesuai objek: skala-turun;
        inden teks: 100%;
        white-space: nowrap;
        limpahan: tersembunyi;
        }
    @skrin media dan (lebar maksimum: 500px) {
        .kolum {
        lebar: 100%;
        }
    }
  </style>
....
<badan>
<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;" value="Teruskan">
        <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;" value="Teruskan">
        <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    </form>
  </div>
</div>
</body>

Answer 1

background-size: cover akan mencapai kesan ini.

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