inputで画像付きのレスポンシブボタンを作りたい

inputのsubmitボタンを画像ボタンに置換して、かつレスポンシブ対応したいのですが、うまくいきません。
サイズに合わせて沢山ボタン作ることも考えていますが、
その他改善方法あるいは代替え方法などありますでしょうか？

該当のソースコード

<input type="email" name="email" maxlenght="255" required="required" class="form-control form" placeholder="メールアドレスを入力してください"/><br />

<br />

</form>

.btn1 {
border: 0 none;
cursor: pointer;
max-width: 100%;
height: 171px;
background-size: contain;
background: url(img/bn2.png) no-repeat scroll 0 0;
}

form input.form {
padding: 20px;
width: 70%;
height: 50px;
margin: 0 auto;
font-size: 16px;
text-align: center;
}

試したこと

divで囲ったり、max-widthをかけたりなど試しました。

補足情報（FW/ツールのバージョンなど）

仕様したのはbradketsです。

hatena19

2020/11/12 11:16

提示のCSSでボタンは画像になっていますが、レスポンシブ対応とは具体的にどのようにしたいのでしょうか。ボタンのサイズを画面一杯に広げたいということではないですよね。あと、ボタン画像のサイズも提示してください。

行動規範の内容に同意します

回答1件

とりあえずご希望のことは、
ボタンのサイズを相対値(%)で指定して、画面幅の変化に応じて縦横比を維持したまま拡縮するということだと推測すると、下記のようなCSSで。

css
1* {
2  box-sizing: border-box;
3}
4
5.btn1 {
6  border: none;
7  cursor: pointer;
8  width: 35%;
9  padding-top: 10%;
10  margin-top: 10px;
11  background: center / cover no-repeat url(http://placehold.jp/350x100.png?text=画像ボタン);
12}
13
14form input.form {
15  padding: 20px;
16  width: 70%;
17  margin: 0 auto;
18  font-size: 16px;
19  text-align: center;
20}