Gibt es eine Möglichkeit, mein Bild der Größe der Navigationsleiste anzupassen?

Question

Gibt es eine Möglichkeit, dass ich die width meiner navigation bar die gleiche width als das Bild machen kann. Das Problem ist, ich arbeite mit einem Bild, das eine Originalgröße von 497 x 298px hat, aber um das Bild die gesamte Breite der Seite zu strecken, während immer noch margins von 10px auf beiden Seiten muss ich width: 98.4% setzen.

Auch wenn ich die width 100% auf width 100% setze, ist die Navigation viel zu lang und passt nur in einen normalen Desktop-Bildschirm, wenn ich es 50% mache. Im Moment haben sie beide die gleiche Länge, aber wenn ich die Größe der Seite verändere, werden sie nicht mehr mit dem ul-Element synchronisiert, das den Regeln folgt, die ich eingestellt habe.

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

sollten Sie wickeln einfach Ihre Navigation in einem <div>. Gib es 100% Breite. Weisen Sie dann eine background-image Ihrem <ul> zu und machen Sie diese 98% Breite. einschließlich dieser Hintergrundeigenschaften

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

habe ich eine

DEMO HERE

woohooo in einer Woche nach Cali zu bewegen !!! Also habe ich es Cali thematisiert.

Hinweis: Bei dem von mir verwendeten Bild handelt es sich um die gleichen Abmessungen wie in Ihrem Beitrag angegeben.

Auch Sie können Wana überprüfen Sie die background-size properties at w3schools