■実験室

■プロフィール

Sligh'Hand

Author:Sligh'Hand

所属ギルド
Open Travelers
称号
ぐったりたぬぬ
特徴
公園内でマジシャンを目指す新米教師。桜の下で「たぬき寝入り」するのがマイブーム。

■最近の記事
■最近のコメント
■ブログ内検索

■リンク
■RSSリンク
■カテゴリー
■月別アーカイブ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


スポンサー広告 | --:--:--

【ぐったりうpろだ】縦長表示の原因

 おはよーございます。 ぐったりたぬぬです。 なんだかんだで昨晩 は寝落ちしてしまいました。 ってわけで、日付が変わったちょっと後に起きだして作業開始。 なんという夜行性。

 今朝までに、昨日の記事に書いた縦長表示の原因が判ったというか、解決の方針が決まったので、そのメモ程度。





 max-width の指定で幅を制限された画像が IE8 で表示したときに縦長になってしまう件、当該ページにはこんなタグを使ってしました。 ちなみに、タグ中の image.jpg はヨコ 640 px、タテ 480 px の何の変哲もない jpeg 画像です。

<img src="image.jpg" style="width:100%;max-width:160px">

 意図としては、画像が親要素の幅いっぱいになるように (タテヨコとも) 拡大/縮小して表示。 でも幅が 160 px を超えるようだったら、(タテヨコとも) 幅 160 px にしたサイズ以上には拡大しないで、という感じ。 その結果、スラ←がテストに使っていたブラウザではその意図通り動いたものの、IE8 ではあの縦長表示になってしまった、と。

 ↑のタグを IE8 で表示したとき、実際に表示される画像のサイズはヨコが 160 px、タテが 666 px でした。 ん? タテの 666 px ってのはどこから出てきたんだろう。。。 もしかして呪いの数字??

 結果から言うと、この呪いの数字が解決の手掛かりになりました。 max-width:160px の指定を削除して画像を表示すると、そのサイズはヨコ 889 px、タテ 666 px。 ヨコの 889 px は画像の親要素の幅、で、タテの 666 px は「元の画像を幅 889 px になるように拡大したときのタテのサイズ」 だったわけです。

 ようするに、IE8 で何が起きていたかと言うと、画像をまず width:100% になるように拡大した後、幅だけを 160 px に縮小していたみたいです。 もともとスラ←がテストに使っていたいくつかのブラウザは最後に幅だけじゃなく高さも一緒に縮小してくれていたみたいですけど、IE8 ではそうじゃなかったようで。。。

 で、修正方針。 横幅だけ縮小されるのが問題なら、タテの長さも縮小してもらえばいい、と。 つまりは max-width だけじゃなくて max-height も使いましょう、と。 ぇ? 強引?

<img src="image.jpg" style="width:100%;max-width:160px;max-height:120px;">

 ↑みたくすればいいんじゃないの? と。

 そんなわけで、この件、今夜にでも修正してみます。

へびのあし

 なんで 890 px も幅がある親要素に対して width 100% とかしておきつつ max-width 160 px なんて無駄な設定をしているのかっていうツッコミは、まったくもってごもっともです。 実際、max-width で指定している 160 px 自体、当初の意図通りの数値じゃぁありません (ぇ。 実際、max-width には元画像の幅である 640 px を指定したかったんですよb

 つまり、親要素幅いっぱいまで画像を拡大して表示してb んでも、元画像以上に拡大はしないでb なーんていうリキッドデザイン? にしたかったわけです。

 でも、max-width を 640 px に設定しても IE8 で表示される画像の高さは 666 px。 じゃぁこの 666 ってなんだー、って探っていたら↑の結論に行きついた、と。 そんな感じ。

 HTML も CSS もよくわかっていないので、変なことしてるようだったら入れ知恵してあげて下さい><

テーマ:web制作 - ジャンル:コンピュータ

幻の裏日記 | 08:27:54 | Trackback(0) | Comments(0)
コメントの投稿

管理者にだけ表示を許可する

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。