送信ボタンの代替え画像の縦幅の数字を変えても適応されない。

実現したいこと
入力フォームの送信ボタンを自作の画像にしているのですが、、送信ボタン自作画像の縦の大きさが数字を変えても適応されません。

幅はきちんとwidhtの％の数字を変えればきちんと適応されます。何故か高さの数字を変えても適応されません。

高さの数字を適応するにはどうしたらよいでしょうか？原因が分からず困っています。

試したこと
htmlのスタイルシートの
/* 送信ボタンの大きさ、スタイル */
.auto-style4 {の
height: 33%;

ｃｓｓのコードのimg.example8 {height: 33%;
に変えてみても縦幅の大きさが変わらなく困っています。

回答よろしくお願いいたします。

html
1<!DOCTYPE html> 
2
3<html>
4
5<head>
6<meta content="text/html; charset=utf-8"/>
7<meta name="viewport" content="width=device-width, initial-scale=1">
8
9<link rel="stylesheet" href="lppage1.css">
10
11
12 <title>初期申込フォーム</title> 
13 <style type="text/css">
14    /* レスポンシブ対応で右に出る謎の余白を無くす */
15    .wrapper {
16         overflow: hidden;
17     }
18
19
20 /* 入力フォームの位置 */     
21 .auto-style1 {
22     margin: auto;
23     text-align: center;
24   }
25
26 
27  /* 送信ボタンの大きさ、スタイル */
28  .auto-style4 {
29
30margin-top: 74px;
31/* 画像の上の余白 */
32height: 33%; /*%表示で無ければ、何故か中央配置にならず。 送信ボタン代替
33え画像に合わせたレスポンシブ表示　元サイズ1211px×376px */
34width: 86%;/*%表示で無ければ、何故か中央配置にならず。 送信ボタン代替
35え画像に合わせたレスポンシブ表示　元サイズ1211px×376px */
36padding: 0;
37}
38
39/* buttonを使うとき、勝手に表示される影・枠線・背景色といった装飾をリセットする */
40        .auto-style4 {
41            cursor: pointer;
42            /* マウスカーソルを乗せると指になる */
43            outline: none;
44            /* クリックしたときに表示される枠線を消す */
45            border: 1px solid #000;
46            background: transparent;
47            /* 背景の灰色を消す */
48            border: none;
49            /* 枠線を消す */
50        }
51
52 
53
54
55</style>
56</head>
57<body>
58<!--wrapperレスポンシブ対応で右に出る謎の余白を無くすbody全体に適応-->
59<div class="wrapper">
60
61<form action ="▽▽▽" method ="▽▽">
62
63<div class="auto-style1">
64
65  <button type="submit" id="submit" name="submit" class="auto-style4">
66      <img src="formlyric10.png" alt="確認画面へ" class="example8" /></button>
67</div>
68</form>
69</div>
70
71 </body></html>

css
1/* ボタン代替え画像の大きさ調節 */
2img.example8 {
3
4  width: 86%;/* ボタン枠に収める */
5  height: 33%;/* ボタン枠に収める */
6 
7 
8}
9
10/* 送信ボタンの大きさ、スタイル */
11.auto-style4 {
12
13  margin-top: 74px;
14/* 画像の上の余白 */
15height: 33%; /*%表示で無ければ、何故か中央配置にならず。 送信ボタン代替
16え画像に合わせたレスポンシブ表示　元サイズ1211px×376px */
17width: 86%;/*%表示で無ければ、何故か中央配置にならず。 送信ボタン代替
18え画像に合わせたレスポンシブ表示　元サイズ1211px×376px */
19padding: 0;
20
21}

itagagaki

2021/08/26 10:29

> %表示で無ければ、何故か中央配置にならずそんなことはないはずです。 .auto-style4 は、それ自身の幅にどんな指定をしても中央にレイアウトされますが、.auto-style4 に配置した画像の幅が大きくて .auto-style4 に収まらず右にはみ出てしまうとき、画像は中央に収まっていないので、.auto-style4 が中央にないと思ってしまったのではないでしょうか。%で指定した幅はたまたま画像の幅以上になったのでしょう。 buttonのサイズとimgのサイズを設定したいのだと思いますが、具体的にどうしたいのか教えていただけますか？

gujhufiugho

2021/08/26 11:11

回答ありがとうございます。 buttonのサイズとimgのサイズサイズは同じにしたいです。ただ、PCでみると画像のサイズが（高さ）が長すぐるため、画像の高さを小さくしたいのですが、 buttonのサイズとimgのheightの値を小さくしても、何故か大きさがかわらないのです。ちなみに、buttonのサイズとimgの横幅の値は変更すると、きちんと大きさが適応されます。なぜか、高さだけ値を変更しても、その大きさが適応されず困っています。

itagagaki

2021/08/26 11:33

レスポンシブというワードも書かれていますが、とりあえず絶対値pxで指定できればいいですか？

gujhufiugho

2021/08/26 11:49

返信ありがとうございます。Pxでも大丈夫です。

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

回答1件

ベストアンサー

まずボタンのサイズ等を決めます。

CSS
1  .auto-style4 {
2    margin-top: 74px;
3    border: 0;
4    padding: 0;
5    width: 150px;
6    height: 100px;
7    background: transparent;
8    outline: none;
9    cursor: pointer;
10  }

そしてボタンの中に置く画像のサイズをボタン（親）のサイズに合わせます。

  .auto-style4 img {
     margin: 0;
     border: 0;
     padding: 0;
     width: 100%;
     height: 100%;
  }

margin, border, padding はリセットされているなら省略可。

投稿2021/08/26 12:32

itagagaki

総合スコア8402

gujhufiugho

2021/08/26 13:05

ありがとうございます。上記の方法で解決できました。感謝いたします。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

送信ボタンの代替え画像の縦幅の数字を変えても適応されない。

関連した質問