화면 크기에 맞는 버튼 만들기 - 배경 이미지 사용법에 대한 자세한 설명

Question

여러 그래픽을 나란히 표시하고 장치 화면 크기에 맞게 조정해야 하는 pfsense 종속 포털을 개발 중입니다. 이는 이미지 입력 ​​유형을 사용하여 훌륭하게 달성할 수 있습니다. 그러나 pfsense 장치는 이 커밋을 올바르게 인식하지 못합니다. 작동하려면 "계속" 값을 가진 커밋 유형이 필요합니다.

대신 배경 이미지를 사용해 보았지만 배경 이미지의 크기가 조정되지 않습니다. 화면이 작아지면 전체 크기로 나타나고 잘립니다.

배경 이미지 크기를 조정하려면 어떻게 해야 하나요?

<style>
    #content{font-family:'Source Sans Pro',sans-serif;배경색: 회색; -webkit-배경-크기:cover; 배경 크기:표지; 테이블-셀 수직 정렬:가운데;}
    #content{text-align:center} body,html{margin:0; 너비:100%; 디스플레이:테이블}
    .row {표시: 플렉스;}
    .column {플렉스: 50%; 패딩: 50px;}
    입력 {
        배경 크기: 포함;
        크기 조정: 둘 다;
        테두리: 0;
        너비: 100%;
        최대 너비: 100%;
        패딩: 0 0 50%;
        개체 맞춤: 축소;
        텍스트 들여쓰기: 100%;
        공백: nowrap;
        오버플로: 숨김;
        }
    @미디어 화면 및 (최대 너비: 500px) {
        .열 {
        너비: 100%;
        }
    }
  </스타일>
....
<본문>
<div id="content">
<div class="행">
  <div class="열">
    <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="계속">
        <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    </양식>
  </div>
  <div class="열">
    <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="계속">
        <input name="zone" type="hidden" value="$PORTAL_ZONE$">
    </양식>
  </div>
</div>
</body>

Answer 1

background-size: cover이 효과를 얻을 것입니다.

으아악

으아악 으아악