html - 缩放窗体背景按钮图像

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