- ベストアンサー
CSSによってIEでNNにあるmax-widthと同等の機能をさせるには？
HTMLの＜table＞タグを使わずに、CSSのpositionやfloatを使って横２段、３段組のレイアウトをしたいと考えています。 さて、この場合それぞれの段に設定した横幅よりも大きな幅を持つ画像を挿入した場合、NNではmax-widthにより画像の最大幅をコントロール出来ますが、IEではこの属性設定が出来ません。このため画像を挿入した段の横幅が画像の幅まで伸びてしまうことがあります。そこで、NNのmax-widthに相当する機能をCSSによりIE上で実現する方法をお教えください。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#1 です。 先ず、PHPは例として取り上げただけですので、この文言には反応しないでく ださい。 でCSSですが、出来ないと思います。 Javascriptを利用すれば出来るかもしれませんが、詳しくは分かりません。 以下に、画像サイズをリサイズするサンプルを記しました。参考になるなら、 ここから自力で発展させてください。 （何の保障もありませんので、悪しからず・・・） ※注意：インデントに全角空白を使用 ---- Begin Sample HTML ---------------------------------------------- <html><head><title>画像をリサイズ</title> <script type="text/javascript"><!-- function resizeImg(w, h, dmt) { if( dmt < 1 ) return false; w = Math.round(w/dmt); h = Math.round(h/dmt); if( w < 20 || h < 20) return false; document.fig1.width = w; document.fig1.height = h; } // --></script> </head><body> <p> <img name="fig1" src="fig.gif" width="400" height="320" alt=""> </p> <p> 下のボタン・クリックで、画像サイズを変化させます。<br> <input type="button" onClick="resizeImg(400,320,1)" value="原寸大"> <input type="button" onClick="resizeImg(400,320,2)" value="1/2 サイズ"> <input type="button" onClick="resizeImg(400,320,4)" value="1/4 サイズ"> </p> </body> </html> ---- End Sample HTML ------------------------------------------------ 【戯言】 ブロードバンド云々と言われて、動画や音楽などの巨大なデータが行き来し ます。しかし、100あるデータを100利用するのであれば、これは問題ないと 思います。 しかし、実際のブラウザに表示されるのが 200x200 サイズの画像なのに、通 信経路は 400x400 サイズの画像データが流れると言うのは、資源の無駄使い だと思います。
その他の回答 (3)
- Bo_Bo
- ベストアンサー率65% (97/149)
#1 です。 質問者殿がシステムの運用者ならば、 画像の投稿を受け付ける。 ▼ 画像サイズが既定値以上ならリサイズする。 ▼ リサイズ済みの画像を貼り付ける。 と言う処理を組み込めば良いと思います。 PHPの場合、それようの関数が用意されています。 システムの運用者でないならば、管理者にその旨を要望してみるのも一案です。
お礼
なるほど！ガッテンしました。 運用者ではないので要望してみます。 その上で、Javascriptを使ってClient側で処理出来るかな───等と考えては見ましたが、phpに関して全く無知であることからも、とても出来そうもありませんので、他力本願で行きます！ ありがとうございました。 追加質問： お答えから推測するに、本件はCSSだけでは解決出来ない問題である、という理解でよいのでしょうか？
- Bo_Bo
- ベストアンサー率65% (97/149)
#1 です。 書き忘れです。 “overflow”が適用された領域に、はみ出さない分量のテキストが配置され ている場合であっても注意が必要です。 ブラウザの文字サイズ拡大縮小機能を利用して、文字サイズの大小でどうな るかを検証してみてください。 （フォント・サイズを絶対値指定しても、Firefoxなどは拡大縮小できます。）
- Bo_Bo
- ベストアンサー率65% (97/149)
“overflow”の利用はどうかな！？ <div style="width:200px; height:200px; overflow: hidden"> <img src="fig.gif" width="400" height="400" alt=""> </div> 領域をはみ出した要素が見えなくなる欠点はありますが、領域幅を固定する ことは出来ます。 overflow = 領域をはみ出した要素の扱いを指定。 ・visible - 表示する（規定値） ・hidden -- 隠す ・scroll -- スクロール・バーを表示する ・auto ---- 自動 ・inherit - 継承 【蛇足】 レイアウトが固定幅で決まっているのに、その領域をはみ出す要素があるの は、「レイアウト」か「要素」どちらかに問題があるように思います。 画像ならば、縮小版でレイアウト枠に収めて、拡大版を別ページで見せるよ うな工夫が必要かもしれませんね。
お礼
回答ありがとうございます。 overflowについては全ての値を試してみましたが、結果は安んじられるものではありませんでした。部分的に隠れてしまうのは困るし、autoやscrollは何の効果ももたらしませんでした。inheritは確かIEはサポートしていないはずですしね。 実はあるブログの投稿でこの問題にぶつかったのです。仰るとおりブロック幅は既定ですから、投稿する写真の横幅をそれ以内に縮小して投稿すればよい、というのも一つの解決方法なのですが、ブログのように簡単に投稿出来るシステムを利用するに当たって、その都度画像サイズを調べるというのは、使い勝手として「面白くない」訳です。何とか自動的に縮小出来ないものか、それが今回の問題なのです。投稿記事が掲載されるブロックを包含するブロックの横幅を越えないなどのCSSの構造があれば、包含ブロックではみ出しを抑制出来るか、とも考えているのですが...。
お礼
なるほど！！またしてもガッテンです。 何回にも亘る回答本当にありがとうございました。 大いに参考にさせて戴きます。