画面サイズに合わせたボタンの作り方～背景画像の使い方を詳しく解説
<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>
