iPhoneなどスマホで表示される際のヘッダー画面について

記事幅にヘッダ画像のサイズが揃っているか、画面いっぱいかによって、設定するスタイルが異なりますが、内容は同じで表示したい所を表示させることはできます。

通常は

window: 100%
height: auto;
max-height: 100px; ← これは不明min-heightだったかも。

などとなっているかと思います。この状態は、window幅に対して高さが自動で計算されますが、これは元の画像のサイズによって比率がかわります。仮にスマホに合わせると、PCでは高さがありすぎて困るとか、逆もまたしかりです。
このため、アスペクト比を固定して表示したい場合は、それなりに変更する必要があります。

これを踏まえて、僕的には3番目の案として、メディアクエリによって端末ごとにアスペクト比を変更し、背景の位置(background-position)によって、必要な領域をなるべく表示するようにスタイルすると言うのを提案します。

サンプル: オリジナル画像と修正したスタイルの比較 | jsFiddle

これらに合わせて、Simplicityオリジナルのmax-height(min-Height)を打ち消しが必要。

max-height: unset;

等。画面全体の場合は、#headerに対してスタイルする。
こんな感じです。

失礼しました。
こちらになります。
http://inspirationavatar.com/

background-position: center center;で普通に入るっぽいんですが、iphoneの時だけとあるので、いわゆるスマホの時だけと考えると

@media screen and (max-width: 30em) {
  #h-top {
    background-position: center center;
  }
}

で良いのではないかと。

僕ならこうします。
サンプル: 480px以下の表示の時にアスペクト比と背景画像の位置変更 | codepen

Hidekichiさん、
ありがとうございます。

知識が乏しくて恐縮なのですが、
教えていただいたCSSは、テーマの編集のどれを修正したらいいのでしょうか？

mobile.cssですか？
responsive.cssですか？

それともstyle.cssや、header-css.php、
header-css-mobile-responsive.phpですか？

例えばですが、できればどこ（テーマ編集）から入って、それ（style.css）のここ（上から何行目もしくはこのトピック）をこういう風に修正するという感じで教えていただければ助かります。

素人ですみません。
よろしくお願いします。

Hidekichiさん、
ありがとうございます。

今、responsive.cssの部分に、教えていただいたこちら

@media screen and (max-width: 30em) {
#h-top {
background-position: center center;
}
}

を追加したら、iPhoneで表示される際に綺麗に真ん中に画像が表示されるようになりました。
おっしゃっていただいていたのは、responsive.cssのことだったのですね。
ありがとうございます。感謝します。

できたら子テーマstyle.cssに追記がわかりやすいですが、Simplicity 1系を利用されている場合は、子テーマstyle.cssを他のmobile.cssやその他諸々が書き換えるかも知れません。

2系を利用されている場合は、子テーマstyle.cssで問題ないと思います。

ポイントとしては、

#h-top {
  width: 100%;
  height: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding: 0 0 33.783783784%;
  overflow: hidden;
  min-height: unset;
}
@media screen and (max-width: 30em) {
  ##h-top {
    padding: 0 0 56.25%;
    background-position: 30% 100%;
  }
}

の、

#h-top {
  width: 100%;
  height: 0; //ここ
  background-size: cover; //ここ
  background-repeat: no-repeat;
  background-position: 0 100%; //ここ
  padding: 0 0 33.783783784%;  //ここ
  overflow: hidden;
  min-height: unset; //ここ
}

です。
heightを0にして高さを無くし、paddingによって高さを作ります。なぜこうするかは、#h-topが100%の時、高さを一定にするためです。100%は画面サイズによって可変ですから、高さも可変である必要があります。

もとの画像を見ると表示領域が、740 x 250 px辺りのサイズだったので、

250 / 740 * 100 = 33.783783784(%)

となっています。他のトピックでも書きましたが、アスペクト比が一定の時、横幅が狭まればおのずと縦幅も狭まります。ここから、メディアクエリで、スマホサイズの時にpaddingの値を変えて、56.25%にしています。56.25%は16:9のアスペクト比です。

background-size: coverは、足りない所を補うために、足りている所を非表示にします。縦が足りなくなったら縦を入るように調整して、横幅を削るという具合です。もし逆のことが起こったら、横幅を補って縦幅を削ります。
この動作があるために、うまく表示したい所が合わないことがあります。そこでbackground-positionにて、そこらを微調整するわけです。

メディアクエリは、必要な所を書き換えるだけでよいですから、paddingとbackground-positionだけを書き換えているという寸法です。
ちなみに、メディアクエリにあるmax-width: 30emは 30*16で480px相当です。ここは、環境によってサイズを変更して下さい。最大幅が480pxまでの端末ということなので、もう少し大きくしたいと思えば、512pxで32emですし、別にpxで指定しても良いです。

考えないといけない場面としては、スマホ横向きとかでしょうか。スマホやタブレットはサイズがいろいろありすぎるので細かくは合わせられないかも知れません。が、まぁ頃合いを見つけて設定すれば、画像の位置はどこでも調整できます。

Hidekichiさん、
ありがとうございます。

本当に助かりました。
また何かありましたらよろしくお願いします。