html - 比例表背景按钮图像

如何在下面的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;
}

如果我设置按钮的高度-可以，但是我希望高度与宽度成比例。目前，我只能使它的宽度变宽。

我在这里完全迷路了。先感谢您。

最佳答案

您可以改用输入类型图片

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

和你的CSS

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

关于html - 比例表背景按钮图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29307600/