ウィジェットエリアによって、スマホの画像表示で縦横比が変わる

わいひら様

jetpackの「画像（jetpack）」をウィジェット画面に出す方法ですが、インストールすれば自動的に追加されるようです。下記のサイトに詳しく載っていました。
https://stmemo.wordpress.com/2014/10/10/%E3%80%90jetpack%E3%80%91-%E8%BF%BD%E5%8A%A0%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88%E6%A9%9F%E8%83%BD/

表示がおかしい件ですが、スマホ画面のスクリーンショットを
https://goo.gl/Fx3bOv
に保存してみましたのでご確認お願い致します。
1ページ目が変わってしまった画像で
2ページ目が正常な状態です。

AUNは初めて使ったので見づらい状態になっているかも知れません。
申し訳ありません。

よろしくお願い致します。

画像はどちらも正常に表示されるんですが、autoptimizeでエラーでてますね。
ひとまず停止してもらう方が良いかと思います。

これのせいかわかりませんが、スマホ時にdevith-widthにならずにview portが1280pxのまま表示されているように思います。基本的に正しく表示されていない部分があると、何が影響しているがわからないので、autoptimizeは停止の方向で。

Hidekichi様

お世話になっております。
ありがとうございます。

autoptimizeを停止してみたのですが、変わらないです。

他に何か手がかりありませんでしょうか。
お手数おかけして申し訳ありません。

画像自体とautoptimizeは関係ないのですが、エラーがでていることでviewportが正しく動作していなかったと思われます。現在はエラーはでてませんが、エラーがとれたので言われている画像の状態が再現できました。

エラーが出てviewportが1280pxで固定されると、結局PC画面と何も変わらず縮小されるだけなので。

おそらく、

.jetpack-image-container img {
    width: 100%;
    height: auto;
}

これでスマホは解決できるかと。

アドレスが http://パパカメラ.com/ の時にスマホ表示になるのはそういう仕様ですか？
また以前言われていたヘッダとナビの間の高さ問題が解決されていないようですが、これも仕様ですかね？

Hidekichi様

ありがとうございます。
教えていただいた方法で解決しました。

アドレスが http://パパカメラ.com/ の時にスマホ表示になるのはそういう仕様ですか？
というのが、すみません、よく理解できないのですが、通常と異なる仕様になっていますでしょうか。

それと、以前教えていただいたヘッダとナビの間の高さについてですが、
Hidekichi様に教えていただいた方法で一旦対応していたのですが、
その後ワイヒラ様がsimplicityの仕様変更されましたので、
インストールし直して、現在は解決していると思ったのですが、どこかおかしい部分がありますでしょうか。

すみません。wordpressは使い始めて間もないので、基本的な事がまだ理解できておらず、
初歩的なミスが多いと思いますが、何卒ご容赦下さい。

よろしくお願い致します。

スクリーンショットを撮ったので、確認してみて欲しいのですが、緑線上はホームのリンクで表示されるトップページのPC画面です。
緑線下は各記事のリンクから表示される投稿の画面です。

緑線上は一見正しいように思えますが、メニューの表示はなく、ヘッダも途中で切れてます。また画面上部にモバイル時のみ表示されるはずのメニューが出てます。これはおそらくですが、view portの設定が正しくないためになるのではなかろうかと思います。

緑線下は一応本来の表示になっていますが、今度はヘッダ下に前回のトピックと同様にマージンが開いています。
これは、#h-topに入っているmin-height: 480px;が原因です。しかし、単純にこれを除去するだけでは、緑線上と同じように正しくヘッダが表示されません。
その解決方法は前回のトピックで書いたとおりです。

ちなみにヘッダの高さは、heightで指定すると、PC画面と同じだけスマホやらの画面でも高さが確保されてしまいます。

必要なことは、以下のとおりです。

• 背景画像のサイズからアスペクト比を算出する
  • 縦÷横 * 100 = x %
• 高さを0にする
• paddingにて、アスペクト比によって高さを確保する

これに併せて、background-position、background-size: cover等の設定が必要になります。

上記で対応した場合、ナビとヘッダの間にスペースができません。よって、ナビの上部マージン(margin-top)あるいは、マージンそのものを入れる、もしくはヘッダにmargin-bottomにて好きなスペースを入れることで対応できます。

これらは背景画像なのでこういうことですが、teraさんのサイトの場合、背景画像でなくてもimgタグでも可能です。考え方は同じですが、以下のような手法になります。

親となるブロックにposition: relativeが入っていること。またoverflow: hiddenを入れること。
imgはposition: absolute。
top,bottom,left,rightに0を入れて、margin: autoにする。
width: 100%; height: auto;

これぐらいでイケると思います。
サンプル: imgタグの要素をアスペクト比で表示 | jsFiddle

Hidekichi様

色々とご教示頂きましてありがとうございます。
非常に助かりました。

昨夜の時点で私のPCでは通常どおり表示されていたので安心していたのですが、
今朝のHidekichi様からの説明で、もしやと思いブラウザをIEからクロームに変更したら仰る通りの状況でした。
今回質問しなかったらずっと気づいていなかったと思います（汗）

再度ご教示頂いた内容と、前回の内容も含めて色々と変更してみて、ようやく改善出来たようです。
もし可能であればご確認頂けるとありがたいです。お手数ばかりおかけして申し訳ありません。

以下の内容をCSSに追記しました。
#header {
position: relative;
overflow: hidden;
height: 0;
padding: 0 0 23.3203125%;
background-position: center center;
background-size: cover;
}

#header img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: auto;
}

#h-top {
min-height: unset !important;
}

ヘッダー画像とグローバルナビの間にスペースが欲しかったので、
margin-topを追記しました。
#navi {
margin-top:30px;
background: #fafafa;
border-top: 3px double #888;
border-bottom: 3px double #888;
}

Hidekichi様,わいひら様
今回もご親切に色々と教えて頂きまして大変感謝しております。
ありがとうございました。
本当にsimplicityはこのフォーラム含めて無料とは思えない素晴らしいテーマですね。