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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

Q&A

解決済

2回答

2854閲覧

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

vitabrevisarsl1

総合スコア57

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

0グッド

1クリップ

投稿2017/06/16 02:26

編集2018/06/24 06:06

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

chrome は良好でした。
イメージ説明

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

イメージ説明

css

1@media screen and (min-width: 769px) { 2 #wp-custom-header .resp1 { 3 display: none; 4 } 5 #wp-custom-header .resp2 { 6 display: none; 7 } 8 #wp-custom-header .resp3 { 9 display: inline; 10 max-width: 100%; 11 height: auto; 12 background-size: contain; 13 } 14}

[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 に対して、

css

1position: static; 2left: 50%; 3min-height: 100%; 4width: auto; 5top: 50%; 6transform: 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 と同じフォルダに置き、

javascript

1$(function () { 2objectFitImages('.resp3'); 3});

css

1.resp3 { 2object-fit: cover; 3object-position: center top; 4font-family: 'object-fit: cover; object-position: center top;' 5}

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/06/16 03:54

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

2017/06/16 03:59

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

2017/06/16 04:28

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

2017/06/19 17:42

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

回答2

0

ベストアンサー

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

css

1.has-header-image .custom-header-media img, 2.has-header-video .custom-header-media video, 3.has-header-video .custom-header-media iframe, 4.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img { 5 height: 100%; 6 left: 0; 7 -o-object-fit: cover; 8 object-fit: cover; 9 top: 0; 10 -ms-transform: none; 11 -moz-transform: none; 12 -webkit-transform: none; 13 transform: none; 14 width: 100%; 15}

投稿2017/06/20 02:41

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

vitabrevisarsl1

2017/06/20 04:56

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

2017/06/20 06:16

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

0

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

CSS

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

投稿2017/06/20 05:14

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

vitabrevisarsl1

2017/06/20 06:09

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

2017/06/20 06:56

static → absoluteです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問