IE ヘッダ画像の中心が左上隅に!
- 評価
- クリップ 1
- VIEW 1,348
サイズ違いで画像を resp1(300x163),resp2(768x419),resp3(1000x546) と用意しまして、ヘッダ画像をレスポンシブ反応させてみました。
IE(11.0.9600.18697) では、いずれのサイズでも、以下のように、画像の中心が左上に移動されたようになります。世界地図の右下しか見えません。 図中1000x546の文字列は画像として埋め込まれています。
@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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+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%;
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
position: static;
での位置移動は経験上あまりうまくいかないことがあります。
外側の要素に適切な高さを設定してやればよいと思います。
#wp-custom-header {
min-height: 100vh;
/*position: relative;*//* うまくいかないなら付ける */
}
.has-header-image .custom-header-media img {
position: absolute;
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.98%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
m.ts10806
2017/06/16 12:54
IEの場合はバージョンにより大きく違いが見られることがあります。バージョンも追記してください。
vitabrevisarsl1
2017/06/16 12:59
ご指摘ありがとうございます。文中に追記いたしました。
m.ts10806
2017/06/16 13:28
html部分を、該当の部分だけで良いので提示は可能ですか?
vitabrevisarsl1
2017/06/16 14:37 編集
文中に追記致しました。
kei344
2017/06/20 02:42
問題が起きるサイトのURLを提示いただくことは可能ですか?
この投稿は削除されました