2011-07-22 12 views
23

このコードを使用することが法律である:HTML5 - IMGで幅と高さを使用できますか?

<img src="...(here image)...." width="50px" height="50px" /> 

それとも使用する必要があります。スタイル=の方法が好ましい

<img src="...(here image)..." style="width: 50px; height: 50px;" /> 

答えて

1

あなたはそのスタイリングを移動した場合...実際にそれも良いだろうしヘッダーのCSSファイルまたはスタイルタグに書き出すことができます。

+0

私は反対する、と(それはあなたの使用にもよるが)ほとんどの場合、幅と高さの属性が優先されていると言うでしょう。 WおよびH属性は、外部ファイルでCSSで簡単に上書きされます。インラインスタイルは!importantでしか上書きできません。この属性は、より柔軟性を提供します。 – RobW

+0

私は、インラインスタイルをどんな形や形にしても、好みの...期間ではないと主張します。 cssがこれらのスタイリングに及ぼす影響にかかわらず。ほとんどいつもインラインスタイル===悪い習慣。あなたは種類のWとHの特性をCSSプロパティ...カスケードスタイルシートのカスケード一部の背後にある基本的な概念を壊すことで上書きされている方法のご説明で、この引数のケースを作ります。あなたが実際にカスケードツリー上の高次のように動作するインラインスタイルを注入する場合は、必然的に、特定のブラウザと脆い戦術を生かしされます。 – ar3

6

HTML 5仕様によると:

幅と高さがIMGの属性...要素のビジュアルコンテンツの 寸法を与えるように指定することができる

出典:http://www.w3.org/TR/2011/WD-html5-20110113/the-map-element.html#dimension-attributes

また、H TML 5仕様では、すべての要素がスタイル属性を持つことがあります。出典:http://www.w3.org/TR/html5/elements.html#the-style-attribute

したがって、両方が許可されているので、あなたはあなたの好奇心に合ったものを自由に選ぶことができます。

+2

@eriscoへの感謝を更新するので、これが好まれますか? – Pacerier

3

CSSは 'img'に適用され、画像タグの基本的なHTML幅&の高さ属性を上書きします。

<style> 
    img { 
     width: 100%; 
     height: auto; 
    } 
</style> 

<img src="assets/img/logo.png" width="500" height="100"> 

上記のコードは、コンテナの幅全体に広がり、その高さは幅との関係になります。

この方法は、網膜に適したグラフィックスを手に入れた場合に役立ちます。

1

は、既に述べたように:

  • CSSは、両方が存在する場合に<img> attrinutesを上書きし、
  • <img> attrinutesは、ブラウザのヒントです。

もう1つの違いは、ユニットの使用である:

  • HTML5widthheight属性はCSSピクセルとして解釈される単位、なし整数でなければなりません。実際にはbrouwersは%(それはHTML4で有効でした)を許容しますが、width="5cm"のようなものを入力するとwidth="5"(つまり5px)と解釈されます。
  • CSSを使用する場合は、任意の長さの単位と非整数が使用できます。たとえば、width: 5.5cmはokです。ユニットを使用する必要があります(たとえば、width: 5は有効なCSS幅ではありません)。可能であれば

ので、IMOは、CSSを使用する必要があります。

関連する問題