このコードを使用することは合法です:
<img src="...(here image)...." width="50px" height="50px" />
または私は使用する必要があります:
<img src="...(here image)..." style="width: 50px; height: 50px;" />
ブラウザのレンダリングのヒントとして最初に使用することをお勧めします。2番目の使用は動作します。
最初のフォームでは、「px」を追加しないでください。
http://www.w3.org/TR/html5/embedded-content-0.html#dimension-attributes
HTML 5仕様によると:
Img ...の幅と高さの属性を指定して、要素の視覚コンテンツの寸法を指定できます。
ソース: http://www.w3.org/TR/2011/WD-html5-20110113/the-map-element.html#dimension-attributes
また、HTML 5仕様に従って、すべての要素にはスタイル属性があります。ソース: http://www.w3.org/TR/html5/elements.html#the-style-attribute
したがって、両方が許可されているので、どちらを好みに合わせて自由に選択できます。
「img」に適用されたCSSは、画像タグの基本的なHTMLの幅と高さの属性を上書きします。
<style>
img {
width: 100%;
height: auto;
}
</style>
<img src="assets/img/logo.png" width="500" height="100">
上記のコードは、コンテナの幅全体に広がるイメージになり、その高さは幅に関係します。
このアプローチは、get-goからRetinaに適したグラフィックを読み込む場合に役立ちます。
すでに述べたように:
<img>
属性を上書きします。<img>
attrinutesはブラウザーのヒントにすぎません。別の違いは、単位の使用です:
width
およびheight
属性は、CSSピクセルとして解釈される単位のない整数でなければなりません。実際には、ブラウザは%
( HTML4 で有効でした)を許容しますが、width="5cm"
のようなものを配置すると、width="5"
(つまり5px
)。width: 5.5cm
は問題ありません。また、単位を使用する必要があります(たとえば、width: 5
は有効なCSS幅ではありません)。したがって、IMO、可能であればCSSを使用する必要があります。
Style =の方法をお勧めします...実際には、スタイルをcssファイルまたはヘッダーのスタイルタグに移動するとさらに良いでしょう。