Question

我制作了这个非常简单的形式，并将图像作为按钮。

是否有一种方法可以按照窗口大小调整按钮的大小，与输入的方式相似 - 即按钮的窗口会逐渐变小？

这是html：

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

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

我尝试将按钮宽度设置为百分比并使用最大宽度，但无济于事。我不确定是否可以使用媒体查询来平滑地重新缩放按钮。

三天前我开始学习HTML，所以我真的不知道自己在做什么。

Answer 1

尝试使用百分比而不是像素。

所以，如果你想让它具有响应性，可以这样做：

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

使用百分比可能很难，但这是使按钮大小响应的最简单方法。

要了解有关CSS，Javascript，HTML5，PHP等的更多信息，请访问：http://www.w3schools.com/

Answer 2

这是一个可以为您提供良好起点的解决方案：http://jsfiddle.net/bz60swhf/。

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

如何根据窗口大小调整按钮大小？

2 个答案: