画像ブラウザの全幅

Question

私は、すべてのブラウザの幅にする必要があるWordPressのサイトにヘッダ画像を持っています。

すでに親テーマに既存のコードは次のとおりです。

background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg"); 
background-repeat: no-repeat; 
background-position: center center; 
-webkit-background-size: cover; 
background-size: cover; 
position: relative; 
box-shadow: 0 7px 10px -10px #000; 
width: 100%; 
z-index: 0; 
height: 300px; 
margin-bottom: 80px; 

テーマに第二のスタイルシートを使用し、その上の画像CSS親スタイルシートからのスタイルのほとんどを継承thatsのもありスタイルシートは次のとおりです。

background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg"); 
width: 100%; 
height: 300px; 

私は見出し画像は、2つのスタイルシート内の2つのCSSコードを持っていますが、テーマは来た道のthats、それは通常のかもしれので、私はこれでは専門家ではない理由はわかりません。

幅が100％に変更されても、画像は元のサイズ（1369x325px）に固執しているため、小さなブラウザで一部を切り取ってしまいます。

私が間違っているつもりですすべてのヘルプは素晴らしい、サイトのアドレスのようになります。http://biobreak.co.uk/test/services/

感謝。

Answer 1

最初のスタイルシートのルールは、実際に背景画像のサイズを単語cover。

第2のルールのwidth: 100%;設定では、周囲の要素の幅のみが設定され、背景イメージ自体は変更されません（coverのままです）。

だから、その二番目のルールに

background-size: 100%; 

を追加する必要があります。

Answer 2

つの方法は、最初のものはvwユニット

img { 
    width: 100vh; 
} 

あなたがしている場合

img { 
    position: absolute; 
    width: 100%; 
} 

次か、単に使用した画像をrelativeのdivに画像を配置し、提供することです背景画像だけを使用するbackground-size: 100%;