如何在里面制作带图像的按钮？

Question

我想创建一个看起来像的按钮：

我试过了：

的CSS：

button {
   color: #900;
   border: 1px solid #900;
   font-weight: bold;
   width: 200px;
   height: 100px;
 }

 button img {
   margin-right: 5px;
   vertical-align: middle;
 }

HTML：

<button class="btnExample" type="submit" value="Submit">
    <img src="./images/img04.jpg" width="18" height="18" alt=""/>Submit</button>

结果：

为什么图像这么小（18 * 18像素）？如何让图像更大？

Answer 1

更改此项以增加尺寸

<img src="./images/img04.jpg" width="28" height="28" alt=""/>Submit</button>

更改尺寸更改width=" "和height=" "

button {
   color: #900;
   border: 1px solid #900;
   font-weight: bold;
   width: 200px;
   height: 100px;
 }

 button img {
   margin-right: 5px;
   vertical-align: middle;
 }

<button class="btnExample" type="submit" value="Submit">
    <img src="http://4vector.com/i/free-vector-kuba-arrow-button-set-clip-art_117492_Kuba_Arrow_Button_Set_clip_art_hight.png" width="58" height="58" alt=""/>Submit</button>

Answer 2

图像和你一样大。根据您的评论，图像的实际尺寸似乎是18 x 18像素。我可以通过为width和height属性设置更大的值或通过将width和height属性设置为CSS中的适当值来拉伸它。但是，向上缩放可能会对像jpeg图像等光栅图像产生图形差的结果。

因此，最好使用图形程序以所需的尺寸创建图像，并更改width和height属性以匹配新尺寸。