2016-03-30 12 views
3

背景画像に使用しているCSSを以下に示します。私の問題は、ブラウザのサイズを変更すると、画像がナビゲーションバーを完全に埋めるようにサイズ変更されないということです。以下の画像を参照してくださいcssを使ってnavbarの背景画像のスケールをnavbarの境界にするには

#navmenu{ 
    width:auto; 
    height:240px !important; 

    background-image: url("../Images/IMG-20160222-WA0001.jpg"); 
    background-repeat:no-repeat !important; 
    background-size:cover !important; /*strech to fit navbar border*/ 
} 

私はwidth属性で遊んでみましたが、これで幸運はありませんでした。ありがとう。

Cropped image view screen size decreased Full image view when screen maximised

EDIT:オプション[background-size:contain !important;]画像付き

は、ナビゲーションバーの境界線を適合しません。最後の画像をご覧ください。代わりにcontain`:enter image description here

+1

を試してみてください? – Aides

+0

@Aides [background-size:contains!important;]オプションを使用すると、画像がnavbarの枠線に収まらない。最後の画像をご覧ください。編集 – Ozwurld

+0

を参照してください。問題は、画像を短軸に沿って、長軸に沿って、または伸ばして(他のどのような結果を達成したいのですか?)です。 – Aides

答えて

1

はたぶん、あなたは `背景サイズが欲しいbackground-size:contain

#navmenu { 
 
    width: auto; 
 
    height: 240px !important; 
 
    background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"); 
 
    background-repeat: no-repeat !important; 
 
    background-size: contain !important; 
 
    /*strech to fit navbar border*/ 
 
}
<div id="navmenu"> 
 
</div>

+0

[background-size:contains!important;]オプションを使用すると、画像がnavbarの枠線に収まらない。最後の画像をご覧ください。編集を見てください – Ozwurld