トップ > 日記 > IEの画像がのびる訳

IEの画像がのびる訳

日記

f:id:tenman:20110329110544p:image:w350

IE8の画像が伸びてしまう

どうして、そのようなことになってしまうのか、様子を見てみました。

大体こんな感じだということがわかってきた。

画像のサイズが、親のブロックの幅よりも大きいサイズで、

width heightの属性値が親ブロック幅よりも大きな値で記述され、

スタイルシートで、max-width:100%;が記述されて、ハミ禁のスタイル指定がされている時、

IE以外は、height:auto;で画像の縦横の比率を維持してくれるが、IEは、height属性値を採るために、びよーんと伸びる

左の画像は、下のリンクのページをキャプチャしたものです。

2枚の画像は、width、height　属性を書いたものと書かないものの表示の違いです。


xhtml1.0での場合です　文書型により、また違う結果あり　かもしれません

対策

WordPressのテーマファイルで、この問題を解決しようとすると、以下のそれぞれで対応が出来ます。
要素などは、必要なものにあわせてくださいね

jQuery　(.ie8というクラス名はbody_class()にブラウザ判定クラスを追加している場合 ）

jQuery(".ie8 .attachment-post-thumbnail,.ie9 .attachment-post-thumbnail").css({"width":"100%","height":"auto"});

WordPress filter
$is_IEというのは、IEだったら　trueを返すWordPressのグローバル変数です。$is_iphoneとかもあります

if($is_IE){
	add_filter("enough_post_thumbnail","ecnough_ie_height_issue");
}

function ecnough_ie_height_issue($content){

	return str_replace('<img ', '<img style="width:150px;height:auto;" ',$content);
}

CSS　body_classにブラウザ判定クラスを追加して

.ie8 .attachment-post-thumbnail,
.ie8 .wp-post-image{
	max-width:90%!important;
	margin:0 3%;
	height:auto;
}

偶然みつけた残念なこと


はてなは、chromeブラウザを見限ったのでしょうか？


IE8でも、自分の好みのサイズで画像を表示したい時どうする？


ところで、IE8で右の画像を閲覧すると、この右側の画像が幅100pxぐらいのサムネールで表示されてしまいます

IEでも、この上の写真のように、自分の好みの大きさで表示するには、どうしたらいいか、

アップロードしたら差し込まれるはてな記法のソースは以下のようなもの


このソースをちょっと変更して、貼り付けます
私は、w350と記法に追加していたので、サイズが入っています

<a href="http://f.hatena.ne.jp/tenman/20110329110544" class="hatena-fotolife" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/t/tenman/20110329/20110329110544.png" alt="f:id:tenman:20110329110544p:image:w350" title="f:id:tenman:20110329110544p:image:w350" class="hatena-fotolife" width="350"></a>
width="350"
のところを
style="width:350px;"
に変更して、ソースを貼り付ければ、大丈夫みたいです。

めんどうですね

TOP