如何使背景图像适应屏幕大小？

Question

我已经创建了导航和一个有背景图片的部分，我希望它自动调整到屏幕大小，但是，它没有正确调整，background-image 的大小几乎保持不变调整浏览器 window。关于如何解决此问题的任何想法？

正常情况下的样子

调整浏览器大小时的外观 window

“DEVOUR”标志不完全可见。请不要介意导航，稍后我会修复。

/* GENERAL */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: black;

}

.container {
    max-width: 1500px;
    margin: 0 auto;

}


img {
    max-width: 100%;
    height: auto;
}

/* HEADER AND NAV */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(7, 7, 7);
    opacity: 80%;
    padding-left: 15em;
    padding-right: 12em;
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
}

header:hover,
header:focus {
    opacity: 100%;
    transform:scale(1.05);;
    transition: 1s ease;
}

header:not(:hover) {
    opacity: 80%;
    transform:scale(1);
    transition: 1s ease;
    
}


nav ul li{
    display: inline-block;
}

.nav-item-first {
    color: #da2424;
    text-decoration: underline;
}
nav ul li a {
    color: white;
    text-decoration: none;
    font-family: 'Londrina Solid', sans-serif;
    font-size: 1.7em;
    margin: 1em;
}

nav ul li a:hover {
    color: #da2424;
    text-decoration: underline;
}

/* FIRST SECTION */

.main-section {
    background-image: url('../IMG/main-section-logo.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 80vh;
    border-bottom: 1px solid rgb(15, 13, 13);
    border-top: 1px solid rgb(15, 13, 13);
}

.main-section .button-container {
    height: 90%;
    display:  flex;
    align-items: flex-end;
    justify-content: center;
    
    
}

<body>
    <main>
      <header>
          <img src="IMG/straight-back-games-logo.png" class="logo" alt="logo of straight back games studio" width=110px>
          <nav class="navbar">
              <ul>
                  <li><a class="nav-item-first" href="#">HOME</a></li>
                  <li><a class="nav-item" href="#">CONTACT</a></li>
                  <li><a class="nav-item"  href="#">PRESS</a></li>
                  <li><a class="nav-item"  href="https://store.steampowered.com/app/1274570/DEVOUR/" target='_blank'>BUY DEVOUR!</a></li>
              </ul>
          </nav>
          </div>
      </header>

      <section class="main-section">
          <div class="button-container">
              <div class="container">
                  <div class="buttons">
                      <a href="#" class="btn-red">BUY NOW</a>
                      <a href="#" class="btn-white">WATCH TRAILER</a>
                  </div>
              </div>
          </div>

      </section>

Answer 1

试试这个

img {
  width: 100%;
  height: auto;
}

或阅读此页，可能会有用：

https://www.w3schools.com/css/css_rwd_images.asp

Answer 2

使用这个

img {
 width: 100%;
}

提示：

.main-section {
    background-image: url('../IMG/main-section-logo.jpg') no-repeat center center/cover;
    height: 80vh;
    border-bottom: 1px solid rgb(15, 13, 13);
    border-top: 1px solid rgb(15, 13, 13);
}

使用高度根本不是一个好的选择。尽量避免。

Answer 3

如果您希望页面上的 height/width 内容具有响应性，则需要在处理页面内容时指定 %，因为添加 % 意味着尺寸不会是静态的，并且会响应到浏览器的大小 window/screen.

在您的 CSS

中试试这个

img {
 width: 100%;
}

Answer 4

事情是这样的...下面的代码回答了您之前的问题，但我认为它不能解决您的问题。

.main-section {
    background: url('main-section-logo.jpg') no-repeat center bottom;
    background-size: 100vw;
    height: 80vh;
    border-bottom: 1px solid rgb(15, 13, 13);
    border-top: 1px solid rgb(15, 13, 13);
}

我相信你想要的是这个..阅读评论..下面的完整解释

.main-section {

/* full screen background image "fire in background" */

  background: url('bg-img.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  /* height of this section 100% of the viewport height */
  
  height: 100vh;
  
  /* borders */
  
  border-bottom: 1px solid rgb(15, 13, 13);
  border-top: 1px solid rgb(15, 13, 13);
  
  /* align item "container" to center of page */
  
  display: grid;
  place-items: center;
  text-align: center;
}

<!-- full screen section display grid for alignment -->

        <section class="main-section">
        
                <!-- contains bg-logo and buttons container -->
                
                <div class="container">
                
                    <!-- "background image" logo only -->
                    
                    <img class="background-logo" src="bg-logo.png" alt="">
                    
                    <!-- buttons -->
                    
                    <div class="buttons">
                        <a href="#" class="btn-red">BUY NOW</a>
                        <a href="#" class="btn-white">WATCH TRAILER</a>
                    </div>
                </div>
        </section>

您需要将背景图片分成两部分，以便您可以单独控制它们。使用单词 DEVOUR 作为常规图像并在容器上设置最大宽度以限制宽度（你已经这样做了，我只是将它从 1500px 更改为 1000px）然后在 .main-section 上使用背景图片，以便火始终位于 DEVOUR 一词后面。

如果你想要一个工作副本，这里是我为你制作的 github 存储库的 link，你可以下载它（我从 google 上抓取了一张火焰图像不拥有它）。

https://github.com/codeKJEK/split-bg-image

如何使背景图像适应屏幕大小？

How can I make a background-image adjust to screen size?

html

css

responsive