width属性は優先度が低い

長いことHTMLをあつかってきたつもりですが、基本的なところも改めて調べてみると、覚え間違いをしていることが多いですね。

img要素は、上の画像のようにと書いて、src属性はともかく、alt属性が必須項目なので、width属性・height属性も必須項目のような気がしていました。
おまけに、HTMLに直接書くことから、element.styleと同じく優先度が高いもの、と。

だから、レスポンシブWebデザインにおいてwidth属性が指定してあるのに、なぜ画像の大きさがウインドウサイズによって変化するのか引っかかっていたのですが、width属性はスタイルのwidthプロパティよりも、優先度が低かったんですね。

とスタイル属性に”width:240px;height:auto;”を指定してみると

小っちゃくなった。

さらにmax-widthのほうが優先度が高くて


さらにさらにmin-widthに違う値を指定すると

これが最優先。

widthプロパティはもちろんのこと、max-width・min-widthはIE6では非対応（こんなハックもあるようですがmin-width、max-widthを使いたい）ですが、IE7以上なら対応しているので、上手く使えば特にCMS使用の場合、コーディングの幅が広がるかな。