画面サイズに合わせたボタンの作り方～背景画像の使い方を詳しく解説

Question

私は、複数のグラフィックスを並べて表示し、デバイスの画面サイズに適応させる必要がある pfsense キャプティブ ポータルを開発しています。これは、画像入力タイプを使用するとうまく実現できます。ただし、pfsense デバイスはこのコミットを正しく認識しません。機能するには、コミット タイプの値が「Continue」である必要があります。

代わりに背景画像を使用しようとしましたが、背景画像が拡大縮小されません。画面が小さくなると、フルサイズで表示され、トリミングされて表示されます。

背景画像のサイズを変更するにはどうすればよいですか?

<style>
    #content{font-family:'Source Sans Pro',sans-serif;background-color: grey; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover;背景サイズ:カバー; 表示:表セル; 垂直配置:中央;}
    #content{text-align:center} body,html{マージン:0; パディング:0; 幅:100%; 高さ:100%; 表示:テーブル}
    .row {表示: フレックス;}
    .column {フレックス: 50%; パディング: 50px;}
    入力 {
        背景サイズ: 含む;
        サイズ変更: 両方;
        境界線: 0;
        幅: 100%;
        最大幅: 100%;
        パディング: 0 0 50%;
        オブジェクトフィット: スケールダウン;
        テキストインデント: 100%;
        ホワイトスペース: ナラップ;
        オーバーフロー: 非表示;
        }
    @media 画面と (最大幅: 500px) {
        。カラム {
        幅: 100%;
        }
    }
  </スタイル>
....
<本体>
<div id="コンテンツ">
<div class="行">
  <div class="column">
    <フォーム名="login_form" メソッド="post" アクション="$PORTAL_ACTION$">
        <input name="redirurl" type="hidden" value="https://url">
        <input name="accept" type="submit" style="background: url(image1.png) no-repeat;" value="Continue">
        <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    </フォーム>
  </div>
  <div class="column">
    <フォーム名="login_form" メソッド="post" アクション="$PORTAL_ACTION$">
        <input name="redirurl" type="hidden" value="https://url">
        <input name="accept" type="submit" style="background: url(image2.png) no-repeat;" value="Continue">
        <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    </フォーム>
  </div>
</div>
</body>

Answer 1

background-size: cover でこの効果が得られます。

リーリー

リーリー リーリー