アプリ版：「スタンプのみでお礼する」機能のリリースについて

IE6でmax-width:100px; max-height:100pxを実現にするには

解決済

  • 質問者：toutetsu
  • 質問日時：
  • 回答数：3件

BLOGでエントリーから画像だけを読み出しサムネイルを集めたhttp://www.photocase.com/photobrowser.aspのようなページを作ろうと考えています。
画像の大きさはまちまちなのでmax-width:100px; max-height:100pxとしました。
しかしmax/min-height/widthはIE6に対応しません。
そこで▼以下の２つを試してみました。
・max-width in Internet Explorer（IE独自のexpressionを利用）
　http://www.svendtofte.com/code/max_width_in_ie/
・minmax.js module（Java Scriptを利用）
　http://doxdesk.com/software/js/minmax.html
ただしこれらの使用方法に従って記載しても、max-width:100px; height:100px（縦長の画像は100px×100pxに）またはwidth:100px; max-height:100px（横長の画像は100px×100pxに）となってしまいます。
Java Script、CSS、または両方を使って解決できる方法がありましたら教えていただけませんでしょうか。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： tabide
  • 回答日時：

#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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

tabideさん、ご丁寧に教えていただいてありがとうございました。
イメージしていたものとピッタリの結果で大変うれしいです。
心からお礼を申し上げます。
ありがとうございました。

通報する
お礼日時：2006/11/08 23:21

No.2

  • 回答者： steel_gray
  • 回答日時：

IE7では max-width,max-height 対応しました。


参考までに。
http://www.microsoft.com/japan/windows/ie/
    • good
    • 0
    • 件
通報する
この回答へのお礼

IE7が普及すれば各ブラウザ間の見え方を調整するこのような面倒な作業から解放されるかもしれませんね。

通報する
お礼日時：2006/11/07 15:19

No.1

  • 回答者： tabide
  • 回答日時：

試しに作ってみました。

こんなんでどうでしょう。

<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さん、お返事が遅くなってスミマセン。
まさにやりかったことがこんなにも短いコードで実現できて大変うれしいです。
ただ、もし可能であればもうひとつだけ教えていただけませんでしょうか。
現在のコードだと横長も縦長もいったん１００ｐｘ×１００ｐｘで表示され、
エントリーから読み出しが終わった段階で本来の縦横比率に修正されます。
これをサムネイルの表示をする時点でそれぞれ本来の縦横比率に表示する
ことは難しいでしょうか。
サムネイルがすべて表示された後で、画像の縦横比率が変更されると
「何が起きたんだろう」と少し違和感を感じます。
お知恵をお借りできれば幸いです。

補足日時：2006/11/07 15:19
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報