ヘッダー画像が他の画面に拡大されない

header div内に画像があります。私はbackground-size: 100% 100%を設定しましたが、モバイルデバイス上ではスケーリングはまったくありません。私はすべてのデバイスで同じイメージを保ちたいと思います。ここでは、完全なCSSです：ヘッダー画像が他の画面に拡大されない

background: url(Oly1600x600.jpg) no-repeat center center; 
background-size: 100% 100%; 
height: 600px; 
position: relative; 
overflow: hidden;

私はbackground-size: coverを使用してみました、それは上部と下部から多くのことを切断し、全体画像をズーム。スケーリングという意味は、デスクトップブラウザ、モバイルデバイス、タブレットなど、すべてのデバイスにオリジナルの画像を表示したいということです。完全に表示することができない場合、画像は歪んではいけません。いくつかのものをクリアすることを願っています。

EDIT：https://www.heroesjourney.com/olympic-weightlifting

任意の提案：ここではページへのリンクがありますか？

出典

2016-10-31 Rodney Wilson

あなたは "それはスケーリングされていない" とはどういう意味ですか？ 'background-size'が' div'のサイズを制御することを期待していますか？ – henry

イメージ要素、または背景イメージを持つ別の要素ですか？スケーリングの意味は？あなたは縦横比について話していますか？信頼できる回答が必要な場合は、おそらくあなたの質問に詳細を追加する必要があります。 – DBS

@DBS更新された質問。 –

を使用して '背景サイズ：カバー;'あなたのスケーリングの問題を解決するはずですが、空のスペースなしでイメージをコンテナに塗りたいと思っています。

出典

2016-10-31 14:53:33

background-size：coverを使ってみましたが、画像全体が拡大されました。 –

HummはjsFiddleをセットアップして何が起こっているか見ることができますか？に？ –

ページへのリンクは次のとおりです。https://www.heroesjourney.com/olympic-weightlifting –

これを試してみてください。background-size: cover;

出典

2016-10-31 14:52:43

background-size：coverを使ってみましたが、画像全体を拡大しました。 –

.img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
}

リンク： - http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries または

#header img{ 
      max-width: 80%; 
    }

出典

2016-10-31 14:54:59

ヘッダー画像が他の画面に拡大されない

答えて

関連する問題