如何使橫幅圖像全寬 HTML & CSS

Question

我想讓我的橫幅圖像全屏寬度，但我沒有成功。 這是我的代碼。

 * { min-width: 300px; max-width: 2000px; margin: 0; padding: 0; }.header-image { background-image: url("idb.jpg"); margin-top: 20px; top: 100%; background-position: center; color: black; background-repeat: no-repeat; height: 400px; background-size: cover; width: 100%; }

 <header> <div class="topa"> <a class="menu-text" href='./home.html'>Home</a> <a class="menu-text" href="./start-a-project.html">Start</a> <a class="menu-text" href='./say-hi.html'>Say hi</a> </div> </header> <br> <br> <section class="header-image"> <div class="header-image-text"> <h1>Hero Image. <p>Text Text Text</p> </h1> </div> </section>

Answer 1

使header和topa div width: 100%並使用justify-content: end;使topa div 成為 flex；

而且我認為您的意思是寫body{...}而不是*{...} 。 *將樣式應用於每個元素

 body { min-width: 300px; max-width: 2000px; margin: 0; padding: 0; }.header-image { background-image: url("idb.jpg"); margin-top: 20px; top: 100%; background-position: center; color: black; background-repeat: no-repeat; height: 400px; background-size: cover; width: 100%; } header,.topa{ width:100%; }.topa{ display:flex; justify-content: end; }

 <header> <div class="topa"> <a class="menu-text" href='./home.html'>Home</a> <a class="menu-text" href="./start-a-project.html">Start</a> <a class="menu-text" href='./say-hi.html'>Say hi</a> </div> </header> <br> <br> <section class="header-image"> <div class="header-image-text"> <h1>Hero Image. <p>Text Text Text</p> </h1> </div> </section>

Answer 2

您正在嘗試確保圖像占據整個寬度，我是否正確理解您的問題？ 如果是的話，我只是在網上隨機拍了一張圖片，並使用了你所擁有的 html 和 css，它似乎工作正常。 圖像占據了整個寬度。 也許你的形象有問題？ 也許您可以發布一個有問題的代碼片段也有圖像？

 * { min-width: 300px; max-width: 2000px; margin: 0; padding: 0; }.header-image { background-image: url("https://www.gannett-cdn.com/-mm-/05e97d16e7fb53439a4222e53dcba47d4d31dde8/c=0-97-1280-584/local/-/media/USATODAY/USATODAY/2014/06/04/1401911998000-AP-Color-Cosmos.jpg?width=3200&height=1680&fit=crop"); margin-top: 20px; top: 100%; background-position: center; color: black; background-repeat: no-repeat; height: 400px; background-size: cover; width: 100%; }

 <header> <div class="topa"> <a class="menu-text" href='./home.html'>Home</a> <a class="menu-text" href="./start-a-project.html">Start</a> <a class="menu-text" href='./say-hi.html'>Say hi</a> </div> </header> <br> <br> <section class="header-image"> <div class="header-image-text"> <h1>Hero Image. <p>Text Text Text</p> </h1> </div> </section>

Answer 3

問題中的 HTML 代碼保持不變。 這是有效的 CSS 代碼

 body{ background: hsl(240, 50%, 5%); color: #fff; padding: 25px; font-family: sans-serif; min-width: 300px; max-width: 2000px; margin: 0; padding: 0; }

最后結果