画像をナビゲーションバーのサイズと同じにする方法はありますか？

Question

私のnavigation barのwidthを画像と同じにすることができる方法はありますか？問題は、元のサイズが497 x 298pxの画像で作業していますが、どちらの側にもmarginsの10pxが残っている間に画像の全幅が伸びるようにするには、width: 98.4%を設定しなければなりませんでした。

また、何らかの理由で、私はwidth 100%にulを設定するとナビゲーションがあまりにも長いですし、私はそれを50％にする場合のみ、通常のデスクトップ画面内に収まります。だから、今は両方とも同じ長さですが、ページのサイズを変更すると、設定したルールに従って、ul要素だけが同期しなくなります。

ul { 
 
    display: block; 
 
    max-width: 100%; 
 
    list-style-type: none; 
 
    margin: 10px 10px 0 10px; 
 
    padding-left: 32%; 
 
    padding-right: 25%; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    background-color: #F25f70; 
 
    font-family: "Oswald", sans-serif; 
 
    border-bottom: 2px solid rgba(0, 0, 0, 0.15) 
 
} 
 
img { 
 
    width: 98.4%; 
 
    height: 500px; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    object-fit: cover; 
 
}

Answer 1

あなただけ<div>であなたのナビゲーションをラップする必要があります。 100％の幅を与えます。次に<ul>にbackground-imageを割り当て、その幅を98％にします。これらの背景のプロパティ

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

含めて、私は週にカリに移動

DEMO HERE

woohoooを作成しました！だから私はカリのテーマにしました。

注：私が使用した画像はあなたの投稿に指定されたものと同じです。

background-size properties at w3schools