次のような画像ボタンを作成しています。
<input type="image" src="red.jpeg" width="150px">
しかし、私が置くと、はるかに大きい元の画像サイズが表示されます:
<img src="red.jpeg" width="150px">
それは私が望むように幅150pxの画像を表示します、
これの何が問題だと思いますか?クラスと CSS でスタイルを設定しようとしましたが、どちらも機能しません。これで私を助けてください。
これを試して
<input type="image" src="red.jpeg" style="width:150px;" />
px、pt、ex 、em などの単位は CSS 構文であるため、単位「px」はwidth
属性内では有効ではありませんが、この属性は CSS とは関係ありません。単位のない数値またはパーセンテージのみを取ります。単純に を使用するかwidth="150"
、または 経由で CSS を使用してみてくださいstyle="width:150px"
。
また、タグでのwidth
属性の使用<input type="image">
(具体的には) は、HTML5 では新しいようです。HTML4.01 仕様では確認できません。( Mozilla のドキュメントを参照するか、W3C でHTML4.01とHTML5を比較してください)。width
そのため、使用しようとした古いブラウザでは属性が認識されない場合があります。
スタイリングは、インライン css または入力要素に適用されるルールを使用して行うことができます。うまくいかないのは、入力要素の width 属性を設定することです。これは、要素のスタイルの width 属性とは別のものです。
これら 2 つのそれぞれは、同じ出力を提供します。
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">