창 크기에 따라 버튼 크기를 조정하려면 어떻게해야합니까?

Question

이미지를 버튼으로 사용하여 매우 간단한 형태로 만들었습니다.

입력과 비슷한 방식으로 버튼 크기에 따라 버튼의 크기를 조정할 수 있습니까? 즉, 버튼이 창에 따라 작아집니다. 내가 백분율에있는 버튼의 폭을 설정하고 아무 소용, 최대 폭을 사용하려고했습니다

form { 
position:relative; 
top:10px; 
margin-left: 25%; 
max-width:100%; 
} 

.form-control { 
    position: relative; 
    top: 65px; 
    left:0px; 
    padding: 16px; 
    width: 35vw; 
    height: 1.8vw; 
    font-size: 20px;  
} 

.button { 
    position: relative; 
    top: 0px; 
    left: 40vw; 
    border: 0; 
    background: url(http://i.imgur.com/9n3Zvcr.png) no-repeat; 
    width: 210px; 
    height: 75px; 
} 

:

<form action="send_form_email.php" method="GET" enctype="multipart/form-data" name="EmailTestForm"> 
<div class="form-group"> 
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
</div> 
<button type="submit" class="button"></button> 
</form> 
</body> 

이것은 CSS입니다 :

이

은 HTML입니다. 미디어 쿼리를 사용하여 단추를 부드럽게 다시 조정할 수 있는지 확실하지 않습니다.

3 일 전에 html 학습을 시작 했으므로 내가하는 일에 대한 단서가 없습니다.

Answer 1

픽셀 대신 백분율을 사용해보십시오. 당신이이 반응하게 이런 일을 수행하려는 경우

그래서 :

width:5%; //Will take 5% of the page 
width:50%; //Will take half of the page 

어려울 수 비율을 사용하지만 버튼을 할 수있는 가장 쉬운 방법은 반응 크기. 여기 당신을위한 좋은 출발점이 될 수있는 솔루션이다 http://www.w3schools.com/

Answer 2

: http://jsfiddle.net/bz60swhf/는

는 CSS에 대한 자세한 내용은, 자바 스크립트, HTML5는, PHP, 그리고 더 많은,로 이동합니다.

HTML :

<form> 
    <input type="email" placeholder="Enter email"> 
    <button type="submit"> 
     <img src = "http://i.imgur.com/9n3Zvcr.png" /> 
    </button> 
</form> 

CSS :이 시점에서

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    box-sizing: border-box; 
} 

body { 
    padding: 10px; 
} 

form { 
    display: table; 
    width: 100%; 
    text-align: center; 
} 

form > input[type = "email"] { 
    outline: 1px solid gray; 
    font: normal 20px/2 Sans-Serif; 
    width: 70%; 
    display: inline-block; 
    vertical-align: middle; 
} 

button { 
    max-width: 30%; 
    height: 40px; 
    background: 0; 
    text-align: left; 
    vertical-align: middle; 
} 

button > img { 
    height: 100%; 
} 

@media screen and (max-width: 394px) { 
    button > img { 
     height: auto; 
     width: 100%; 
}