<p>私は、複数のグラフィックスを並べて表示し、デバイスの画面サイズに適応させる必要がある pfsense キャプティブ ポータルを開発しています。これは、画像入力タイプを使用するとうまく実現できます。ただし、pfsense デバイスはこのコミットを正しく認識しません。機能するには、コミット タイプの値が「Continue」である必要があります。 </p> <p>代わりに背景画像を使用しようとしましたが、背景画像が拡大縮小されません。画面が小さくなると、フルサイズで表示され、トリミングされて表示されます。 </p> <p>背景画像のサイズを変更するにはどうすればよいですか? </p> <pre class="brush:php;toolbar:false;"><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></pre> <p><br /></p>