Question

我正在制作一个像这样的图像按钮：

<input type="image" src="red.jpeg" width="150px">

但它显示的原始图像尺寸要大得多，如果我把：

<img src="red.jpeg" width="150px">

它会根据需要显示150px宽的图像，

你们认为这是什么问题？我尝试用类和CSS来设置样式，但也没有工作，请帮助我，我疯了!!

Answer 1

试试这个

<input type="image" src="red.jpeg" style="width:150px;" />

Answer 2

单位“px”在width属性中无效，因为像px，pt，ex，em这样的单位是CSS语法，但此属性与CSS无关：它需要无单位数或只有一个百分比。尝试使用width="150"，或者通过style="width:150px"使用CSS。

此外，在width标签（特别是）上使用<input type="image">属性似乎是HTML5中的新功能 - 它不在HTML4.01规范中，我可以看到。（请参阅Mozilla's docs，或在W3C上比较HTML4.01和HTML5）。因此，旧版浏览器可能无法识别width属性，因为您尝试使用它。

Answer 3

样式可以使用内联css或应用于input元素的规则来完成。什么行不通，是设置input元素的width属性 - 这是与元素样式的width属性分开且不同的。

这两个中的每一个都给出相同的输出：

1）内联CSS

<input type="image" src="img/girl.png" style="width: 300px">

2）非内联css

.imgBtn
{
    width: 300px;
}

<input class='imgBtn' type="image" src="img/girl.png">

输入类型=图像宽度被忽略

3 个答案: