Making buttons that adapt to screen size - detailed explanation of how to use background images
P粉345302753
2023-08-16 13:38:12
<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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
background-size: coverwill achieve this effect.