화면 크기에 맞는 버튼 만들기 - 배경 이미지 사용법에 대한 자세한 설명
<p>여러 그래픽을 나란히 표시하고 장치 화면 크기에 맞게 조정해야 하는 pfsense 종속 포털을 개발 중입니다. 이는 이미지 입력 유형을 사용하여 훌륭하게 달성할 수 있습니다. 그러나 pfsense 장치는 이 커밋을 올바르게 인식하지 못합니다. 작동하려면 "계속" 값을 가진 커밋 유형이 필요합니다. </p>
<p>대신 배경 이미지를 사용해 보았지만 배경 이미지의 크기가 조정되지 않습니다. 화면이 작아지면 전체 크기로 나타나고 잘립니다. </p>
<p>배경 이미지 크기를 조정하려면 어떻게 해야 하나요? </p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p><br /></p>
