自动重新调整网页上的图像大小

Question

我有一个按钮类型按钮，我想将图像放在上面。 我的代码看起来像这样

<button id="button" type="button" onclick="bus()">
  <img src="DestinationH-Bus-Driver-Login.png">
</button>

这个问题是我得到一个灰色空间，使整个图像变大，如果我使用更大的图像，它工作正常。 但是，如果我突然从电话呼叫该网站，那么大按钮就会很小。 任何建议将不胜感激。

我知道类型图像，但我不能使用它，因为它给了我一个提交类型的按钮，我想要一个按钮类型的按钮，但如果我使用图像类型而不是上述方法，图片确实很好。

Answer 1

为什么不把onclick事件放在图像上？

<img src="DestinationH-Bus-Driver-Login.png" onClick="bus()" />

Answer 2

如有必要，您可以使用image类型的input标记，并通过返回false取消事件处理程序中的默认表单提交：

<input type="image" src="DestinationH-Bus-Driver-Login.png" onclick="bus(); return false;"/>

这应该为您提供与button标签相同的功能，但具有更好的跨浏览器支持，可以使用图像进行样式设置。