レインドロップステーマのヘッダー画像は、ブラウザサイズに応じて自動的に拡縮します。
モバイル表示の場合、ヘッダー画像内に、タイトルやスローガンを表示する設定にしている場合バランスが崩れてしまったり重なり合う可能性があります。
このような場合に、ブラウザの幅が一定サイズ以下になった場合に、高さを指定したい場合は、以下のように調整が可能です。
高さは、heightを使うのではなく、padding-bottomで調整できます。パーセント指定の場合は、幅に対する割合、vhは、ブラウザの高さに対する割合を指定します。
@media screen and (max-width: 640px){
#doc3 div#header-image {
padding-bottom: 50vh;
}
}
javascriptで変更する場合
function change_header_image_ratio() {
$script='if( 641 > parseInt( jQuery( window ).width() ) ) {
raindrops_script_vars.has_ratio_filter= true;
raindrops_script_vars.ratio= 0.5;
}';
wp_add_inline_script( 'raindrops_helper_script', $script, 'before' );
}
add_action( 'wp_print_scripts', 'change_header_image_ratio' );
