製作可自適應螢幕大小的按鈕-背景圖像的用法詳解
P粉345302753
2023-08-16 13:38:12
<p>我正在開發一個需要多個圖形並排顯示並且能夠根據設備螢幕大小自適應的pfsense captive portal。使用影像輸入類型可以很好地實現這一點。然而，pfsense設備無法正確識別此提交。它需要一種帶有值為“Continue”的提交類型才能工作。 </p>
<p>我嘗試使用背景圖像來替代，但是背景圖像無法縮放。隨著螢幕變小，它會顯示為全尺寸並被裁剪。 </p>
<p>我該如何讓背景圖片自適應大小？ </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>
background-size: cover會實現這個效果。