web-dev-qa-db-ja.com

HTML5-IMGで幅と高さを使用できますか？

このコードを使用することは合法です：

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

または私は使用する必要があります：

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

ブラウザのレンダリングのヒントとして最初に使用することをお勧めします。2番目の使用は動作します。

最初のフォームでは、「px」を追加しないでください。

http://www.w3.org/TR/html5/embedded-content-0.html#dimension-attributes

37
TuteC

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

したがって、両方が許可されているので、どちらを好みに合わせて自由に選択できます。

6
erisco

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

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

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

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

このアプローチは、get-goからRetinaに適したグラフィックを読み込む場合に役立ちます。

3
Stacks on Stacks on Stacks

すでに述べたように：

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

別の違いは、単位の使用です：

  • in HTML5widthおよびheight属性は、CSSピクセルとして解釈される単位のない整数でなければなりません。実際には、ブラウザは%（ HTML4 で有効でした）を許容しますが、width="5cm"のようなものを配置すると、width="5"（つまり5px）。
  • CSSを使用する場合、長さの単位と整数以外の数値を使用できます。たとえば、width: 5.5cmは問題ありません。また、単位を使用する必要があります（たとえば、width: 5は有効なCSS幅ではありません）。

したがって、IMO、可能であればCSSを使用する必要があります。

2
Kpym

Style =の方法をお勧めします...実際には、スタイルをcssファイルまたはヘッダーのスタイルタグに移動するとさらに良いでしょう。

1
ar3