<HTML・CSS>ボタンの押下可能範囲について

Question

input type="submit" の要素に対して、backgroundimageを指定したボタンを作成しています。
さらに、ページがレスポンシブなので、
参考リンク ←の通りにボタンを実装しました。

すると、押下した時点で
![
このようになってしまいます。
もちろん、ボタンの下の、「ボタン外かつ枠内」の領域も押下可能です。

background-imageをレスポンシブ対応綺麗にレスポンシブ対応させて、押下範囲も画像の範囲のみにするにはどうすれば良いでしょうか？

宜しくお願いいたします。

Answer 1

#target {
    width: 30%;
}

#target input[type="submit"] {
    border-width: 0;
    width: 100%;
    height: 0;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 56.25%;
    background: url('bg.png') 0 0 no-repeat;
    background-size: contain;
}

<div id="target"><input type="submit" value="" /></div>

Answer 2

paddingの高さの計算については下記の計算式で求められます。

表示画像の高さ ÷ 表示画像の幅 × 100

この通り計算した数値をpadding-topに設定すればよいのでは。