方法1:CSS
次のコードをCSSファイルに追加します。これにより、画像が画面サイズに応じてスケーラブルになります。
img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }
WordPress <img>
タグの自動高さと幅を削除する
ウィンドウをドラッグして、実際の画像スケーリングを確認します。WordPressブログの画像が奇妙に拡大することに気づくでしょう。水平方向のスケーリングはうまくいきますが、WordPress画像の垂直方向のスケーリングはすべて間違っています。
WordPressで画像を均等にサイズ変更できるようにするには、WordPressが< img >
タグに追加する自動の幅と高さの値を削除する必要があり
ます。
例として、これを変更する必要があります:
< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here”
width=”100″ height=”100″ />
これに:
< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />
投稿または静的ページ/テンプレートページにある画像の場合は、上記のCSSをstyle.css
ファイルに追加し、WordPressエディターでタグから‘width’
および‘height’
プロパティを削除するだけ< img >
です。それでおしまい!
ただし、投稿のサムネイルなど、WordPressによって動的に表示される画像の場合、関数を使用して幅と高さを動的に削除する必要があります。
次の関数をfunctions.php
ファイルに追加します。
function remove_wp_width_height( $string ) {
return preg_replace( ‘/\/i’, ”,$string );
}
次に、template.phpページでそれらの投稿サムネイル画像を呼び出すときに、以下を置き換えます。
the_post_thumbnail();
これとともに:
echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );
それでおしまい。ブラウザをドラッグしてサイズを変更し、レスポンシブなWordPress画像の動作を確認してください!
方法2:
上記は一部のテーマでは機能しません。
あなたがそれがうまくいかなかった数少ない人の一人であるならば、あなたはまだ以下の機能を使ってあなたのイメージ問題を解決することができます。
次の関数をfunctions.php
ファイルに追加します。
これによりthe_post_thumbnail()
、で取得した画像からインラインの幅と高さの属性が削除され、これらの属性がエディターに追加された新しい画像に追加されなくなります。
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}