web-dev-qa-db-ja.com

レスポンシブ画像には幅/高さ属性を除外する必要がありますか?

レスポンシブWebデザインの原則の1つはレスポンシブ画像です。具体的な値ではなくパーセンテージを使用して画像のサイズを変更します。これはCSSを介して行われます。

私が抱えている問題は、widthタグにheightおよびimg属性を含める標準的な方法です。これは、CSSで画像サイズを設定することによって排除されるようです。 1つは、長い間、画像タグにディメンション属性を含めることが必要でした。また、これらの値は、画像がロードされる前にページにスペースを作成するために使用されました。

サイズ設定に関しては、画像を別の要素(たとえばfigure)に配置し、CSSで画像の幅を100%に設定することが可能だと思います。ただし、その場合、コンテナのサイズを、おそらく親要素の割合として、などが必要になります。

私はこれを真っ直ぐに考えていないのですか、width属性とheight属性を使用することでCSSの画像サイズを設定していますか?

6
Grant Palin

width要素のheight属性とimg属性は、DOCTYPEの下では、それが暗示されている場合は必要ありません。この点で、Strict、Transitional、およびHTML5の間に違いはありません。

あなたが提案するように、これらの属性は、ページ上のスペースを確保し、ロード中にページが動き回らないようにするためにのみ必要でした-これは重要です。これは、CSSを十分に速くロードする代わりにCSSを使用して実現できます。とにかく画像の前にロードされる可能性が高いため、すべてが正常である必要があります。

widthまたはheightの1つの属性のみを指定することも可能であり、有効です。ブラウザーは、正しいアスペクト比を維持するために、省略された値を計算します。

必要に応じて、属性にパーセント値を指定できます。これが意味しているのであれば、これにCSSを使用する必要はありません。 EDIT:ただし、HTML5ではこれがわずかに変更されたと思います。 HTML5では、widthおよびheightはピクセル値、つまり 有効な非負整数 のみを取ります。

widthおよびheight属性を使用するかどうかは、設計によって異なります。サイズの異なる画像がたくさんある場合は、CSSのすべての寸法をまとめますか、それともimgに含めますか?

9
MrWhite