レスポンシブWebデザインの原則の1つはレスポンシブ画像です。具体的な値ではなくパーセンテージを使用して画像のサイズを変更します。これはCSSを介して行われます。
私が抱えている問題は、width
タグにheight
およびimg
属性を含める標準的な方法です。これは、CSSで画像サイズを設定することによって排除されるようです。 1つは、長い間、画像タグにディメンション属性を含めることが必要でした。また、これらの値は、画像がロードされる前にページにスペースを作成するために使用されました。
サイズ設定に関しては、画像を別の要素(たとえばfigure
)に配置し、CSSで画像の幅を100%に設定することが可能だと思います。ただし、その場合、コンテナのサイズを、おそらく親要素の割合として、などが必要になります。
私はこれを真っ直ぐに考えていないのですか、width
属性とheight
属性を使用することでCSSの画像サイズを設定していますか?
width
要素のheight
属性とimg
属性は、DOCTYPEの下では、それが暗示されている場合は必要ありません。この点で、Strict、Transitional、およびHTML5の間に違いはありません。
あなたが提案するように、これらの属性は、ページ上のスペースを確保し、ロード中にページが動き回らないようにするためにのみ必要でした-これは重要です。これは、CSSを十分に速くロードする代わりにCSSを使用して実現できます。とにかく画像の前にロードされる可能性が高いため、すべてが正常である必要があります。
width
またはheight
の1つの属性のみを指定することも可能であり、有効です。ブラウザーは、正しいアスペクト比を維持するために、省略された値を計算します。
必要に応じて、属性にパーセント値を指定できます。これが意味しているのであれば、これにCSSを使用する必要はありません。 EDIT:ただし、HTML5ではこれがわずかに変更されたと思います。 HTML5では、width
およびheight
はピクセル値、つまり 有効な非負整数 のみを取ります。
width
およびheight
属性を使用するかどうかは、設計によって異なります。サイズの異なる画像がたくさんある場合は、CSSのすべての寸法をまとめますか、それともimg
に含めますか?