【Twenty Twelve】アイキャッチ画像のIE8での表示サイズ対策

Twenty Twelveでは、the_post_thumbnail()を使いサイズを指定してアイキャッチ画像を表示したとき、IE8ではアイキャッチ画像が設定どおりのサイズで表示されません。そういうスタイル設定になっているようで・・・

設定サイズで表示するために、cssディレクトリのie.cssファイルにある以下のコードのプロパティをmax-width(初期設定width: auto;)に変更します。

img.size-full,
img.size-large,
img.header-image,
img.wp-post-image,
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
	max-width: auto; /* Prevent stretching of full-size and large-size images with height and width attributes in IE8 */
}

the_post_thumbnail()にメディア設定で設定したサイズ(thumbnail)を指定した場合、キチンと設定通りに表示されます。

<?php the_post_thumbnail('thumbnail'); ?>

※追記:初期状態では有効だったはずの設定ですが、他の設定をしていくうちに上手くいかないときもあるので、width:100pxなどのように直接値をpxで書く方法も有効です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です