読者です 読者をやめる 読者になる 読者になる

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;"
に変更して、ソースを貼り付ければ、大丈夫みたいです。

めんどうですね




  • f:id:tenman:20110329121541p:image:w350