- ベストアンサー
IE6でmax-width:100px; max-height:100pxを実現する方法
- IE6でmax-width:100px; max-height:100pxを実現する方法について質問いただいています。画像の大きさがまちまちなため、max-widthとmax-heightを使用してサイズを制限したいと考えていますが、IE6ではこれらのプロパティに対応していません。
- そこで、IE6に対応するための方法として、以下の２つを試してみました。まずは、IE独自のexpressionを利用する方法です。詳細はURLをご確認ください。
- また、Java Scriptを利用する方法として、minmax.js moduleを使用する方法もあります。こちらもURLをご参照ください。ただし、これらの方法を使用しても、縦長の画像や横長の画像は100px×100pxになるという制約があります。ご要件に合う解決策があれば、教えていただけると助かります。
- toutetsu
- お礼率35% (25/71)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 ＞ これをサムネイルの表示をする時点でそれぞれ本来の縦横比率に表示する ＞ ことは難しいでしょうか。 これではどうでしょう。個々のサムネイルごとに修正をかけるので、少しはましかと……。 <html> <head> <style type="text/css"><!-- /* 100x100の領域だけ取って、表示しない。 */ img.thumb { visibility: hidden; width: 100px; height: 100px; } /* ただし、これではスクリプトOFFだと全く表示されない。 */ --></style> <script type="text/javascript"><!-- function func(img) { /* 一旦縦横とも"auto"にして実寸を取得。長い方を"100px"に再設定。そして表示。 */ img.style.width = "auto"; img.style.height = "auto"; if (img.width > img.height) { if (img.width > 100) img.style.width = "100px"; } else { if (img.height > 100) img.style.height = "100px"; } img.style.visibility = "visible"; } --></script> </head> <body> <p> <img class="thumb" src="適当な画像1" onload="func(this)"> <img class="thumb" src="適当な画像2" onload="func(this)"> <img class="thumb" src="適当な画像3" onload="func(this)"> </p> </body> </html>
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
IE7では max-width,max-height 対応しました。 参考までに。 http://www.microsoft.com/japan/windows/ie/
お礼
IE7が普及すれば各ブラウザ間の見え方を調整するこのような面倒な作業から解放されるかもしれませんね。
- tabide
- ベストアンサー率44% (148/331)
試しに作ってみました。こんなんでどうでしょう。 <html> <head> <style type="text/css"><!-- /* スクリプトOFFの場合。これでも実寸表示よりはまし。 */ img.thumb { width: 100px; height: 100px; } --></style> <script type="text/javascript"><!-- function func() { list = document.getElementsByTagName("img"); for (i = 0; i < list.length; i++) { if (list[i].className == "thumb") { /* 一旦縦横とも"auto"にして実寸を取得。長い方を"100px"に再設定。 */ list[i].style.width = "auto"; list[i].style.height = "auto"; if (list[i].width > list[i].height) { if (list[i].width > 100) list[i].style.width = "100px"; } else { if (list[i].height > 100) list[i].style.height = "100px"; } } } } --></script> </head> <body onload="func()"> <p> <img class="thumb" src="適当な画像1"> <img class="thumb" src="適当な画像2"> <img class="thumb" src="適当な画像3"> </p> </body> </html>
補足
tabideさん、お返事が遅くなってスミマセン。 まさにやりかったことがこんなにも短いコードで実現できて大変うれしいです。 ただ、もし可能であればもうひとつだけ教えていただけませんでしょうか。 現在のコードだと横長も縦長もいったん１００ｐｘ×１００ｐｘで表示され、 エントリーから読み出しが終わった段階で本来の縦横比率に修正されます。 これをサムネイルの表示をする時点でそれぞれ本来の縦横比率に表示する ことは難しいでしょうか。 サムネイルがすべて表示された後で、画像の縦横比率が変更されると 「何が起きたんだろう」と少し違和感を感じます。 お知恵をお借りできれば幸いです。
お礼
tabideさん、ご丁寧に教えていただいてありがとうございました。 イメージしていたものとピッタリの結果で大変うれしいです。 心からお礼を申し上げます。 ありがとうございました。