HTMLの<table>タグを使わずに、CSSのpositionやfloatを使って横2段、3段組のレイアウトをしたいと考えています。
さて、この場合それぞれの段に設定した横幅よりも大きな幅を持つ画像を挿入した場合、NNではmax-widthにより画像の最大幅をコントロール出来ますが、IEではこの属性設定が出来ません。このため画像を挿入した段の横幅が画像の幅まで伸びてしまうことがあります。そこで、NNのmax-widthに相当する機能をCSSによりIE上で実現する方法をお教えください。
No.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 サイズの画像データが流れると言うのは、資源の無駄使い
だと思います。
No.3
- 回答日時:
#1 です。
質問者殿がシステムの運用者ならば、
画像の投稿を受け付ける。
▼
画像サイズが既定値以上ならリサイズする。
▼
リサイズ済みの画像を貼り付ける。
と言う処理を組み込めば良いと思います。
PHPの場合、それようの関数が用意されています。
システムの運用者でないならば、管理者にその旨を要望してみるのも一案です。
なるほど!ガッテンしました。
運用者ではないので要望してみます。
その上で、Javascriptを使ってClient側で処理出来るかな───等と考えては見ましたが、phpに関して全く無知であることからも、とても出来そうもありませんので、他力本願で行きます!
ありがとうございました。
追加質問:
お答えから推測するに、本件はCSSだけでは解決出来ない問題である、という理解でよいのでしょうか?
No.2
- 回答日時:
#1 です。
書き忘れです。
“overflow”が適用された領域に、はみ出さない分量のテキストが配置され
ている場合であっても注意が必要です。
ブラウザの文字サイズ拡大縮小機能を利用して、文字サイズの大小でどうな
るかを検証してみてください。
(フォント・サイズを絶対値指定しても、Firefoxなどは拡大縮小できます。)
No.1
- 回答日時:
“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の構造があれば、包含ブロックではみ出しを抑制出来るか、とも考えているのですが...。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- その他(Microsoft Office) 複数の写真を1枚に印刷 5 2023/05/05 22:41
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- 引越し・部屋探し 【冷蔵庫搬入の幅について】 引っ越しをします。 冷蔵庫をかおうと思っています。 急ぎです。 価格は安 2 2023/06/15 19:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
goo は、放置?
-
htmlの文字が縦書きになる
-
WEBページを強制的に横画面で見...
-
テーブルの行を折りたたみたい...
-
css初心者 フレックスボックス...
-
HTML電卓で1文字消す方法
-
HTMLですCSSです 画像のように...
-
テーブルタグのセルの幅の一部...
-
WEBサイト 画像の直接リンクに...
-
CSSについて教えてください。 ...
-
青い枠のみのHTML
-
HTMLです 店主のこだわりという...
-
HTMLです 四角みたいにして中に...
-
初心者html・CSS ウィンドウを...
-
12月のカレンダーを表すHTMLを...
-
pythonに自分で作ったHTMLを、...
-
HTMLです次の意味を持つ要素ま...
-
アコーディオンメニューが思う...
-
スマホ(android)のタッチパネ...
-
HTMLの CSSのファイルというの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
htmlで<form>~</form>を並べて...
-
WEBページを強制的に横画面で見...
-
コードを書いて下さい( ; ; )...
-
css初心者 フレックスボックス...
-
テーブルのセルデータを自動改...
-
CSSデータの作成方法について(...
-
HTMLで画像をポップアップで表...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネ...
-
HTMLで特定の文字だけ色を変え...
-
プログラミングの勉強が進みません
-
スマホでHTMLファイルを開いて...
-
テーブルタグのセルの幅の一部...
-
CSSでつくったメニューのアニメ...
-
大至急。webのシングルページを...
-
角丸画像の背景色を透明にした...
-
HTML入門でもう躓いてしまった。
-
HTMLの CSSのファイルというの...
おすすめ情報