简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Making buttons that adapt to screen size - detailed explanation of how to use background images
P粉345302753
P粉345302753 2023-08-16 13:38:12
0
1
577
<p>I am developing a pfsense captive portal that requires multiple graphics to be displayed side by side and adaptive to the device screen size. This can be achieved nicely using the image input type. However, the pfsense device does not recognize this commit correctly. It requires a commit type with a value of "Continue" to work. </p> <p>I tried using a background image instead, but the background image doesn't scale. As the screen gets smaller, it appears full size and gets cropped. </p> <p>How do I make the background image resize? </p> <pre class="brush:php;toolbar:false;"><style> #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%; } } </style> .... <body> <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="Continue"> <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="Continue"> <input name="zone" type="hidden" value="$PORTAL_ZONE$"> </form> </div> </div> </body></pre> <p><br /></p>
P粉345302753
P粉345302753

reply all(1)
P粉851401475
P粉8514014752023-08-17 00:58:26 1 floor

background-size: cover will achieve this effect. 

<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>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！