缩放形式背景按钮图像

Question

如何在下面的jsfiddle中使用表单按钮响应其容器（流体）的宽度和高度 - 同时缩放到背景图像比率？

https://jsfiddle.net/yykkrgbt/

这是我到目前为止所拥有的

<div style="max-width:500px;">
    <input type="submit" class="activate" value="activate!" />
</div>

.activate{
    background:transparent 
url('https://www.rewardtag.com/images/activate_button_hov.png') no-repeat;
    width:100%;
    background-size: contain;
}

如果我设置按钮的高度 - 它可以工作，但我希望高度随宽度一起缩放。目前我只能让它在宽度上流畅。

我完全迷失在这里。提前谢谢你。

Answer 1

您可以使用输入类型图像

<input type="image" class="activate" src="https://www.rewardtag.com/images/activate_button_hov.png" alt="Submit">

和你的css

.activate { width: 100%; height: auto; }