IE ヘッダ画像の中心が左上隅に！

Question

IE ヘッダ画像の中心が左上隅に！

解決済

回答 2

投稿 2017/06/16 11:26 ・編集 2018/06/24 15:06

評価
クリップ 1
VIEW 1,348

vitabrevisarsl1

score 55

サイズ違いで画像を resp1(300x163),resp2(768x419),resp3(1000x546) と用意しまして、ヘッダ画像をレスポンシブ反応させてみました。

chrome は良好でした。

IE(11.0.9600.18697) では、いずれのサイズでも、以下のように、画像の中心が左上に移動されたようになります。世界地図の右下しか見えません。図中1000ｘ546の文字列は画像として埋め込まれています。

@media screen and (min-width: 769px) {
  #wp-custom-header .resp1 {
    display: none;
  }
  #wp-custom-header .resp2 {
    display: none;
  }
  #wp-custom-header .resp3 {
    display: inline;
  max-width: 100%;
  height: auto;
    background-size: contain;
  }
}

［htmlの該当箇所］

<!DOCTYPE html>
<html lang="ja" class="no-js no-svg">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="WordPress 4.7.5" />
    <link rel="stylesheet" href="style.css">
      <title>net -net- net</title>
    <link rel="canonical" href="whatever you want" />
    <link rel='stylesheet' id='twentyseventeen-style-css'  href='whatever you want' type='text/css' media='all' />

    <style type="text/css">
      img.wp-smiley,
      img.emoji {
        display: inline !important;
        border: none !important;
        box-shadow: none !important;
        height: 1em !important;
        width: 1em !important;
        margin: 0 .07em !important;
        vertical-align: -0.1em !important;
        background: none !important;
        padding: 0 !important;
      }
    </style>
    <style type="text/css" id="custom-theme-colors" >
    .resp3 {
      object-fit: cover;
      object-position: center top;
      font-family: 'object-fit: cover; object-position: center top;'
    }

    @media screen and (min-width: 1px) {
      #wp-custom-header .resp1 {
        display: inline;
        max-width: 100%;
        height: auto;
        background-size: contain;
      }
      #wp-custom-header .resp2 {
        display: none;
      }
      #wp-custom-header .resp3 {
        display: none;
      }
    }
    @media screen and (min-width: 301px) {
      #wp-custom-header .resp1 {
        display: none;
      }
      #wp-custom-header .resp2 {
        display: inline;
        max-width: 100%;
        height: auto;
        background-size: contain;
      }
      #wp-custom-header .resp3 {
        display: none;
      }
    }
    @media screen and (min-width: 769px) {
      #wp-custom-header .resp1 {
        display: none;
      }
      #wp-custom-header .resp2 {
        display: none;
      }
      #wp-custom-header .resp3 {
        display: inline;
        max-width: 100%;
        height: auto;
        background-position-x: center;
        /*width 100%;*/
        background-size: contain;
      }
    }

    @media screen and (min-width: 48em) {
      .colors-custom .nav-links .nav-previous .nav-title .icon,
      .colors-custom .nav-links .nav-next .nav-title .icon {
        color: hsl( 230, 50%, 20% ); /* base: #222; */
      }
    }

    </style>
  <style id="twentyseventeen-custom-header-styles" type="text/css">
    .site-title,
    .site-description {
      position: absolute;
      clip: rect(1px, 1px, 1px, 1px);
    }
  </style>
  <style type="text/css" id="wp-custom-css">
    .has-header-image .custom-header-media img{
      position: static;
    }
    .has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
      height: auto;
    }
    .custom-header-media {
      position: static;
    }
    .custom-header-media:before {
      background: none;
    }
    .page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
      font-size: 2rem;
    }
    .panel-image {
      background-size: contain;
    }
  </style>

</head>

<body class="home page-template-default page page-id-34 twentyseventeen-front-page has-header-image page-one-column title-tagline-hidden colors-custom">
  <div id="page" class="site">
      <a class="skip-link screen-reader-text" href="#content">コンテンツへスキップ</a>
      <header id="masthead" class="site-header" role="banner">
      <div class="custom-header">
          <div class="custom-header-media">
              <div id="wp-custom-header" class="wp-custom-header">
            <img src="C:\Users\Owner\Desktop\world map-300x163.jpg" alt="SSS" class="resp1">
            <img src="C:\Users\Owner\Desktop\world map-768x419.jpg" alt="SSS" class="resp2">
            <img src="C:\Users\Owner\Desktop\world map-1000x546.jpg" alt="SSS" class="resp3">
          </div>    </div>

            <div class="site-branding">
           <div class="wrap">
              <div class="site-branding-text">
                 <h1 class="site-title">
               <a href="whatever you want" rel="home">net-net-net</a>
             </h1>
                  <p class="site-description">世界中どこでも</p>
              </div><!-- .site-branding-text -->
             </div><!-- .wrap -->
          </div><!-- .site-branding -->
      </div><!-- .custom-header -->

      <div class="navigation-top">
          <div class="wrap">
              <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="トップメニュー">
            <button class="menu-toggle" aria-controls="top-menu" aria-expanded="false">
            <svg class="icon icon-bars" aria-hidden="true" role="img"> <use href="#icon-bars" xlink:href="#icon-bars"></use> </svg>
            <svg class="icon icon-close" aria-hidden="true" role="img"> <use href="#icon-close" xlink:href="#icon-close"></use> </svg>メニュー
          </button>
            <div class="menu-%e3%83%88%e3%83%83%e3%83%97%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-container">
            <ul id="top-menu" class="menu">
              <li id="menu-item-311" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-34 current_page_item menu-item-311">
                <a href="http://sss/">whatever you want</a>
              </li>
              <li id="menu-item-308" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-308">
                <a href="http://sss/sss%e3%82%b3%e3%83%bc%e3%83%ab/">機能紹介</a>
              </li>
              <li id="menu-item-217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-217">
                <a href="http://sss/whatsnew/">新着情報</a>
              </li>
              <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71">
                <a href="http://sss/contact/">お問合せ</a>
              </li>
              <li id="menu-item-216" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-216">
                <a href="http://sss/companys/">会社概要</a>
              </li>
            </ul>
          </div>
              <a href="#content" class="menu-scroll-down">
          <svg class="icon icon-arrow-right" aria-hidden="true" role="img"> <use href="#icon-arrow-right" xlink:href="#icon-arrow-right"></use> </svg>
          <span class="screen-reader-text">本文までスクロール</span>
        </a>
      </nav><!-- #site-navigation -->
                  </div><!-- .wrap -->
              </div><!-- .navigation-top -->

      </header><!-- #masthead -->

  <script>
    function(){
        objectFitImages('.resp3');
    };
  </script>
</body>
</html>

IE [要素の検査]では、
.custom-header
-.custom-header-media
--::before
--id="wp-custom-header" class="wp-custom-header"
---画像(.resp1 ～ 3)
という構造。
画像(.resp1 ～ 3)のスタイルは上記。
親要素 .custom-header img に対して、

position: static;
left: 50%;
min-height: 100%;
width: auto;
top: 50%;
transform: translateX(-50%) translateY(-50%);

となっております。（-ms-translate を記載しているのですが、取り消し線が引かれているので無効と思われます。）
－－－－－－－
object-fit について、「object-fitとobject-positionをIEやEdgeでも動かす」を読みました。
https://github.com/bfred-it/object-fit-imagesよりダウンロードした ofi.min.js を html, css と同じフォルダに置き、

$(function () {
objectFitImages('.resp3');
});

.resp3 {
object-fit: cover;
object-position: center top;
font-family: 'object-fit: cover; object-position: center top;'
}

としてみましたが変わらずです。
－－－－－－－
上図chrome のようにIEでも世界地図全面を表示させるにはどのようにすればよろしいでしょうか？
なにがしかご教授いただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

6 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

m.ts10806

2017/06/16 12:54

IEの場合はバージョンにより大きく違いが見られることがあります。バージョンも追記してください。

IEの場合はバージョンにより大きく違いが見られることがあります。バージョンも追記してください。

キャンセル
vitabrevisarsl1

2017/06/16 12:59

ご指摘ありがとうございます。文中に追記いたしました。

ご指摘ありがとうございます。文中に追記いたしました。

キャンセル
m.ts10806

2017/06/16 13:28

html部分を、該当の部分だけで良いので提示は可能ですか？

html部分を、該当の部分だけで良いので提示は可能ですか？

キャンセル
vitabrevisarsl1

2017/06/16 14:37 編集

文中に追記致しました。

文中に追記致しました。

キャンセル
kei344

2017/06/20 02:42

問題が起きるサイトのURLを提示いただくことは可能ですか？

問題が起きるサイトのURLを提示いただくことは可能ですか？

キャンセル
この投稿は削除されました

回答 2 件

評価が高い順
新着順
古い順

+1

position: static; での位置移動は経験上あまりうまくいかないことがあります。
外側の要素に適切な高さを設定してやればよいと思います。

#wp-custom-header {
    min-height: 100vh;
    /*position: relative;*//* うまくいかないなら付ける */
}
.has-header-image .custom-header-media img {
    position: absolute;
}

投稿 2017/06/20 14:14

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2017/06/20 15:09

ご指摘ありがとうございます。static → relative 試してみましたが、残念ながら変わらずでした。

ご指摘ありがとうございます。static → relative 試してみましたが、残念ながら変わらずでした。

キャンセル
2017/06/20 15:56

static → absoluteです。

static → absoluteです。

キャンセル

同じタグがついた質問を見る

Internet Explorer

score 2 · Accepted Answer · 2017-06-20T11:41

ベストアンサー

+2

IEは@supportsに対応していないので、以下のCSSを直接あててみましょうか。
(※style.cssの1738行目あたりにいるやつです)
一応全ブラウザの再チェックはしてみてください。

.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    top: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 100%;
}

投稿 2017/06/20 11:41

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2017/06/20 13:56

ご指摘ありがとうございます。おっしゃる通り@supportsは対応なしでしたので、試してみましたが、残念ながら変化はありませんでした。chromeとFirefoxで確認→上記記述でも異状ありませんでした。

ご指摘ありがとうございます。おっしゃる通り@supportsは対応なしでしたので、試してみましたが、残念ながら変化はありませんでした。chromeとFirefoxで確認→上記記述でも異状ありませんでした。

キャンセル
2017/06/20 15:16

上記のCSSを新に適用しても変化なしですか？
直接htmlに書き込む場合は「style.css」よりに下に書いていますか？
簡単に言ってしまえば「transform: none;」と「width: 100%;」があたっていないために起きてる現象です。

上記のCSSを新に適用しても変化なしですか？直接htmlに書き込む場合は「style.css」よりに下に書いていますか？簡単に言ってしまえば「transform: none;」と「width: 100%;」があたっていないために起きてる現象です。

キャンセル

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

IE ヘッダ画像の中心が左上隅に！

関連した質問

同じタグがついた質問を見る

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

IE ヘッダ画像の中心が左上隅に！

15分調べてもわからないことは、teratailで質問しよう！

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン