ブラウザウィンドウに合わせて画像のサイズを変更するにはどうすればいいでしょうか？こここれまで私がやってきたこと（またはダウンロードサイト全体をZIPで）。
これは Firefox では問題なく動作しますが、Chrome では問題があります。画像のサイズが常に変更されるわけではなく、ページが読み込まれたときのウィンドウのサイズに何らかの形で依存します。
これは Safari でも問題なく動作しますが、画像が最小の幅/高さで読み込まれることがあります。これは画像のサイズが原因かもしれませんが、よくわかりません。(問題なく読み込まれたら、バグを確認するために何度か更新してみてください。)
これをより堅牢にするにはどうしたらよいか、何かアイデアはありますか? (JavaScript が必要な場合でも問題ありませんが、CSS の方が望ましいです。)
ベストアンサー1
これできる純粋な CSS で実行でき、メディア クエリも必要ありません。
画像を柔軟にするには、
max-width:100%と を追加するだけですheight:auto。画像max-width:100%と はIE7 では機能しますが、IE8 では機能しません (はい、これも IE の奇妙なバグです)。これを修正するには、 IE8 に をheight:auto追加する必要があります。width:auto\9ソース：http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
CS: ...
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
画像の最大幅を固定したい場合は、次のようにコンテナ内に配置します。
<div style="max-width:500px;">
<img src="..." />
</div>
JSFiddleの例はこちらJavaScript は必要ありません。Chrome、Firefox、IE の最新バージョンで動作します (私がテストしたのはこれだけです)。