当背景图片网址更改时，按钮大小也会更改

Question

Currently I have a button

<input id="fireAction" type="button" class="submit" onclick="disableSubmit('preFlight');"><br>

Then I change the background image of the button in different case

eg.

#('#fireAction').css('background-image','url(fail.jpg)');
#('#fireAction').css('background-image','url(success.jpg)');

However, since the size of fail.jpg / success.jpg is not the same, how to define some css (Tried width:auto but not working) to make the button fit the size according to the size of background image? thanks

Answer 1

I don't know whether you are looking for JS, jQuery or CSS answer, but as far as CSS goes, you cannot resize the element based on the background-image , what you can do is, you can use input type=image here

<input type="image" src="#" alt="Image" />

Or if you want to stick with JavaScript or jQuery, than declare 2 classes with custom width's and toggle them as per your requirement