Making buttons that adapt to screen size - detailed explanation of how to use background images

Question

I'm developing a pfsensecaptiveportal that requires multiple graphics to be displayed side by side and adaptable 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. 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. How can I make the background image resizable? #content{font-fam

P粉851401475 · Answer

background-size: cover will achieve this effect.

#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%;
    }
}