このページでやっている事

IE8を使って、ホームページなどをみていると、画像が縦方向にビューんと伸びた画像に出会うことがあります。

このページの画像も、IEで閲覧することで、狭いカラムに押し込まれた場合に、縦方向に伸びる現象が確認できると思います

私が制作しているブログのテーマファイルで、このような現象に出会い、どうしてこのようなことが起きるのか、という点についてメモを残すことにしました。

このページは、実際にIEで画像が伸びることを確認するためのページです。

このページのちょっとした説明

このページにあるリンクをクリックしていただくことで、ページ幅やカラム数を変化させることが出来ます。広いカラムや、狭いカラム思い思いに、試していただけます。

W3C html valid

figure

ボタニカルシャメール

[1]これが問題の画像です。この画像タグは、width height 属性にサイズが記述された正しい画像の記述で書かれています。
この記述の仕方は、正当な方法ですが、IEで閲覧したときには、このような問題が発生します。

ども　おまけです

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

ボタニカルシャメール

[2]これが問題の画像です。この画像タグは、width height 属性にサイズが省略されて書かれています。このような省略した記述は、一般的には、正しくないとされていますが、IEでも、画像がうまく閲覧できる書き方としては、有効です。