css 我如何使按钮使用背景图像缩放图像的屏幕大小

3z6pesqy 于 12个月前发布在其他

关注(0)|答案(1)|浏览(106)

我有一个pfsense强制门户，我正在工作，需要多个图形并排显示，并响应设备屏幕大小。这很好地使用图像输入类型。pfsense设备将无法正确识别此提交，但是。它需要一个提交类型，值为继续工作。
我改变了这个使用背景图像提交，但背景图像不缩放。它显示全尺寸，并得到切断作为屏幕变得更小。
如何让背景图像调整大小？

<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>

字符串

css

来源：https://stackoverflow.com/questions/76906884/how-can-i-make-buttons-using-a-background-image-scale-the-image-for-the-screen-s

1条答案

按热度按时间

zvokhttg1#

background-size: cover就可以了。

<input name="accept" type="submit" style="background: url(https://picsum.photos/1500/1500?random=1) no-repeat; background-size: cover;" value="Continue">

字符串

#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="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(https://picsum.photos/1500/1500?random=2) no-repeat; background-size: cover;" value="Continue">
        <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    </form>
  </div>
</div>

的数据

赞(0）回复(0）举报 12个月前

我来回答

css 我如何使按钮使用背景图像缩放图像的屏幕大小

1条答案

相关问题

热门标签

最新问答